JavaScript zum Hinzufügen und Löschen von Nachrichten im Message Board

Dieser Artikel zeigt ein kleines Beispiel für das Hinzufügen und Löschen von Nachrichten auf einem JavaScript-Message Board mit detaillierter Codeanalyse, beinhaltet jedoch keine Datenbankoperationen, sondern analysiert nur die zugrunde liegenden Ideen zur Codeimplementierung:

Ergebnisse erzielen

Code-Schnittstelle ausführen:

Geben Sie eine hinzuzufügende Nachricht ein: (Die neueste Nachricht wird oben angezeigt)

Nachricht löschen: (Klicken Sie auf eine beliebige Nachricht, um sie zu löschen)

Es werden die wichtigsten Funktionen und Effekte angezeigt. HTML- und CSS-Styles werden hier nicht beeinflusst. Der JS-Code wird unten angezeigt:

<Skript>
        // Holen Sie sich das erforderliche Elementobjekt var text = document.querySelector('textarea');
        var btn = document.querySelector('Schaltfläche');
        var ul = document.querySelector('ul');
        // Ereignis registrieren btn.onclick = function () { // Klickereignis an Schaltfläche „Veröffentlichen“ binden if (text.value == '') { // Bestimmen, ob text.value leer ist, d. h., ob der Benutzer Inhalt eingegeben hat alert('Sie können keinen leeren Inhalt veröffentlichen!');
                gibt false zurück;
            } else { // Wenn der Benutzer Inhalt eingegeben hat, wird der Inhalt abgerufen und dem erstellten Element li zur Anzeige zugewiesen // 1. Element erstellen var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='javascript:;' title='Diese Nachricht löschen'>Löschen</a>"; // Den vom Benutzer eingegebenen Inhalt dem erstellten li-Element zuweisen und am Ende ein a-Tag zum späteren Löschen der Nachricht hinzufügen // 2. Elemente hinzufügen // ul.appendChild(li); // Dadurch wird die Nachricht an die spätere Anzeige angehängt ul.insertBefore(li, ul.children[0]); // Die neu hinzugefügte Nachricht ganz oben anzeigen lassen, also in der Reihenfolge von unten nach oben // Elemente löschen: Lösche den li-Knoten, in dem sich das aktuelle a-Tag befindet, also dessen Elternelement var as = document.querySelectorAll('a');
                für (var i = 0; i < as.length; i++) {
                    als[i].onclick = Funktion () {
                        // Das zu löschende li-Element ist das übergeordnete Element von a, also this.parentNode;
                        ul.removeChild(this.parentNode); // Lösche den li-Knoten in ul, und li ist der übergeordnete Knoten des aktuellen a-Tags, achte auf die Beziehung zwischen ihnen}
                }
            }
            text.value = ''; // Abschließend den Inhalt im Nachrichteneingabefeld löschen, um eine weitere Nachricht zu ermöglichen}
</Skript>

Kernwissen:

Fügen Sie der Seite einen Elementknoten hinzu:

Wir möchten der Seite in zwei Schritten ein neues Element hinzufügen: 1. Erstellen Sie das Element. 2. Fügen Sie das Element hinzu.

1. Erstellen Sie ein Element: element.createElement('created element tag');
2. Elemente hinzufügen: node.appendChild(child); // node ist das übergeordnete Element, dem das Element hinzugefügt wird, und child ist das erstellte untergeordnete Element. Hinweis: Diese Methode zum Hinzufügen von Elementen ähnelt der Push-Methode in einem Array, d. h. beim Anhängen von Elementen werden Knoten an der angegebenen Position hinzugefügt: (hauptsächlich zur Anzeige vor dem angegebenen Element hinzugefügt)
node.insertBefore(child, specified element); // „Specified element“ bezieht sich auf das Element, vor dem das Child eingefügt wird. Das „Specified element“ muss auch ein Child-Element des Knotens sein.

Löschen Sie den Seitenelementknoten:

node.removeChild(child); // node ist das übergeordnete Element, child ist ein untergeordnetes Element im node

Hauptimplementierungsidee: Hier verwenden wir hauptsächlich die Funktionen zum Hinzufügen von Knoten zur Seite und zum Löschen von Knoten und binden die beiden Funktionen an verschiedene Schaltflächen. Beispielsweise wird die Funktion zum Hinzufügen von Knoten der Schaltfläche "Veröffentlichen" zugewiesen, und die Funktion zum Löschen von Knoten wird der Schaltfläche "Löschen" zugewiesen, wodurch eine einfache Version des Message Board-Falls realisiert wird. Für eine detaillierte Analyse wird empfohlen, JS-Code mit ausführlichen Kommentaren zu kombinieren.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.