Das Dokument verändern | W3docs JavaScript-Tutorial

JavaScript ermöglicht es, eine Seite nach dem Laden zu verändern: neue Elemente hinzufügen, verschieben, Text aktualisieren, Attribute austauschen und nicht mehr benötigte Dinge entfernen. Das ist die Grundlage jeder dynamischen Oberfläche – vom Anzeigen einer Validierungsnachricht bis hin zum Rendern einer ganzen Liste von Suchergebnissen.

Diese Seite behandelt das praktische Werkzeugset zur Bearbeitung des DOM: Erstellen und Einfügen von Knoten, den Unterschied zwischen textContent und innerHTML, schnelles HTML-Einfügen mit insertAdjacentHTML, das Entfernen und Ersetzen von Knoten sowie die Verwendung eines DocumentFragment, um Aktualisierungen schnell zu halten. Um die zu ändernden Elemente zunächst zu finden, siehe Suchen: getElement* und querySelector*. Einen größeren Überblick darüber, wie die Seite als Knotenbaum strukturiert ist, bietet Die DOM-Knoten verstehen.

Neue Knoten erstellen

Bevor Sie etwas in die Seite einfügen können, müssen Sie es erstellen. Es gibt zwei Bausteine: Elementknoten (<div>, <li>, …) und Textknoten (reiner Text).

Elemente erstellen

Neue Elemente werden mit der Methode document.createElement(tag) erstellt. Das Element existiert nur im Speicher, bis es in das Dokument eingefügt wird – bis dahin sieht der Benutzer nichts. So erstellen Sie ein div und fügen es der Seite hinzu:

<body></body>
<script>
  let div = document.createElement('div');
  div.innerHTML = "Hello, world!";
  document.body.appendChild(div);
</script>

Probier es selbst »

Das Element erscheint erst, wenn appendChild (oder eine andere Einfügemethode) es an einen Knoten anhängt, der bereits im Dokument vorhanden ist.

Textknoten erstellen

Um reinen Text hinzuzufügen, verwenden Sie document.createTextNode(text). Anders als innerHTML behandelt ein Textknoten seinen Inhalt wörtlich – <b> bleibt als Zeichenfolge <b> erhalten, statt zu einem fetten Tag zu werden. Das macht Textknoten zur sicheren Wahl, wenn der Text von einem Benutzer oder einer anderen nicht vertrauenswürdigen Quelle stammt:

<body>
  <div id="container"></div>
</body>
<script>
  const div = document.getElementById("container");
  let textNode = document.createTextNode('Here is some text');
  div.appendChild(textNode);
</script>

Probier es selbst »

Knoten einfügen

Sobald ein Knoten existiert, müssen Sie ihn irgendwo platzieren. Die klassische Methode ist parent.appendChild(node), die den Knoten als letztes Kind hinzufügt. Moderne Browser bieten außerdem eine flexiblere Familie von Methoden, die entweder Knoten oder Zeichenketten akzeptieren:

Methode	Wo sie einfügt
`node.append(...)`	Am Ende, innerhalb von `node`
`node.prepend(...)`	Am Anfang, innerhalb von `node`
`node.before(...)`	Direkt vor `node`
`node.after(...)`	Direkt nach `node`
`node.replaceWith(...)`	Ersetzt `node` vollständig

Hier fügen append und prepend Listenelemente an den entgegengesetzten Enden einer <ul> ein:

<body>
  <ul id="list">
    <li>middle</li>
  </ul>
</body>
<script>
  const list = document.getElementById("list");

  const first = document.createElement("li");
  first.textContent = "first";
  list.prepend(first);

  const last = document.createElement("li");
  last.textContent = "last";
  list.append(last);
</script>

insertAdjacentHTML

Wenn Sie eine HTML-Zeichenkette relativ zu einem Element einfügen möchten – ohne den vorhandenen Inhalt zu stören – ist element.insertAdjacentHTML(position, html) das richtige Werkzeug. Das Argument position ist eines von vier Schlüsselwörtern:

"beforebegin" — vor dem Element selbst
"afterbegin" — innerhalb, vor dem ersten Kind
"beforeend" — innerhalb, nach dem letzten Kind
"afterend" — nach dem Element selbst

<body>
  <div id="box">existing content</div>
</body>
<script>
  const box = document.getElementById("box");
  box.insertAdjacentHTML("beforeend", "<p>added inside, at the end</p>");
  box.insertAdjacentHTML("afterend", "<p>added after the box</p>");
</script>

Da insertAdjacentHTML eine HTML-Zeichenkette parst, sollten Sie ihr niemals nicht vertrauenswürdige Eingaben übergeben – es gilt dasselbe XSS-Risiko wie bei innerHTML. Es gibt Geschwistermethoden insertAdjacentText und insertAdjacentElement zum Einfügen von reinem Text oder einem vorhandenen Knoten an denselben Positionen.

textContent vs. innerHTML

Beide Eigenschaften setzen den Inhalt eines Elements, verhalten sich jedoch sehr unterschiedlich:

innerHTML parst die Zeichenkette als HTML. el.innerHTML = "<b>Hi</b>" erzeugt einen fetten Knoten. Das Zuweisen ersetzt alle vorhandenen Kinder.
textContent behandelt die Zeichenkette als reinen Text. el.textContent = "<b>Hi</b>" zeigt die wörtlichen Zeichen <b>Hi</b>.

Bevorzugen Sie textContent, wenn Sie Text einfügen – es ist schneller und immun gegen HTML/Script-Injection. Greifen Sie auf innerHTML nur zurück, wenn Sie wirklich Markup benötigen und die Quelle vertrauenswürdig ist.

<body>
  <div id="asHtml"></div>
  <div id="asText"></div>
</body>
<script>
  const input = "<b>3 < 5</b>";
  document.getElementById("asHtml").innerHTML = input;   // renders bold text
  document.getElementById("asText").textContent = input; // shows the literal markup
</script>

Elemente verändern

Attribute ändern

Um ein Attribut eines Elements zu ändern, können Sie element.setAttribute(name, value) verwenden. Diese Methode ermöglicht es, den Wert eines Attributs für das angegebene Element zu setzen.

<body>
  <div id="firstID"></div>
  <div>new id is: <span id="result"></span></div>
</body>
<script>
  const div = document.getElementById("firstID");
  const result = document.getElementById("result");
  
  div.setAttribute("id", "newDiv");
  result.innerHTML = div.id;
</script>

Probier es selbst »

Einen tieferen Einblick in den Unterschied zwischen HTML-Attributen und DOM-Eigenschaften (und wann setAttribute vs. direkter Eigenschaftszugriff wie el.id = "..." verwendet werden sollte) bietet Attribute und Eigenschaften.

Erweiterte Manipulationen

Elemente klonen

Sie können eine Kopie eines Elements mit der Methode element.cloneNode(deep) erstellen. Wenn Sie deep auf true setzen, werden das Element und seine Nachkommen geklont.

<body>
  <div id="mydiv">one div here, or two divs if cloned! <span>And here is a span inside the div!</span></div>
</body>
<script>
  const div = document.getElementById("mydiv");
  const clone = div.cloneNode(true);
  document.body.appendChild(clone);
</script>

Probier es selbst »

Elemente ersetzen

Um einen Knoten durch einen anderen auszutauschen, rufen Sie element.replaceWith(newNode) auf. Der alte Knoten verlässt das Dokument und der neue nimmt seinen Platz ein:

<body>
  <p id="old">I will be replaced.</p>
</body>
<script>
  const old = document.getElementById("old");
  const fresh = document.createElement("p");
  fresh.textContent = "I am the replacement.";
  old.replaceWith(fresh);
</script>

Elemente entfernen

Um ein Element aus dem DOM zu entfernen, können Sie element.remove() verwenden.

<body>
  <div>It's the only thing you see, as the next div is removed!</div>
  <div id="mydiv">you don't see me if I'm removed!</div>
</body>
<script>
  const div = document.getElementById("mydiv");
  div.remove();
</script>

Probier es selbst »

Aktualisierungen mit einem DocumentFragment bündeln

Jedes Mal, wenn Sie einen Knoten in das aktive Dokument einfügen, kann der Browser das Layout neu berechnen. Das Einfügen vieler Knoten in einer Schleife, jeweils einzeln, kann daher langsam sein. Ein DocumentFragment ist ein leichtgewichtiger, nicht sichtbarer Container: Sie bauen alle Knoten darin zusammen und fügen das Fragment dann einmal ein. Nur seine Kinder landen im DOM – das Fragment selbst verschwindet.

<body>
  <ul id="list"></ul>
</body>
<script>
  const list = document.getElementById("list");
  const fragment = document.createDocumentFragment();

  for (let i = 1; i <= 5; i++) {
    const li = document.createElement("li");
    li.textContent = "Item " + i;
    fragment.appendChild(li);
  }

  // One single insertion into the live document
  list.appendChild(fragment);
</script>

Weitere Möglichkeiten, DOM-Aktualisierungen effizient zu halten, finden Sie unter DOM-Performance-Optimierung. Wenn Ihr Markup wiederverwendbar ist, ist das <template>-Element eine weitere schnelle Methode zum Klonen einer fertigen Struktur.

Praktisches Beispiel: Eine To-Do-Liste erstellen

Lassen Sie uns diese Konzepte anwenden, um eine einfache To-Do-Liste mit JavaScript zu erstellen:

<body></body>
<script>
// Creating the list container
let list = document.createElement('ul');
document.body.appendChild(list);

// Adding items to the list
function addItem(text) {
    let item = document.createElement('li');
    item.textContent = text;
    list.appendChild(item);
}

addItem('Learn JavaScript');
addItem('Build a to-do list');
</script>

Probier es selbst »

Fazit

Das Dokument zu verändern ist der Kern jeder dynamischen Oberfläche: Erstellen Sie Knoten mit createElement/createTextNode, platzieren Sie sie mit append/prepend/before/after oder insertAdjacentHTML, wählen Sie textContent für sicheren Text und innerHTML nur für vertrauenswürdiges Markup, und verwenden Sie einen DocumentFragment, um Massenaktualisierungen schnell zu halten. Nutzen Sie replaceWith und remove, um Knoten auszutauschen oder zu entfernen.

Um weiterzumachen, erkunden Sie DOM-Manipulation für einen umfassenderen Überblick, Das DOM durchlaufen, um zwischen verwandten Knoten zu navigieren, und Knoteneigenschaften: Typ, Tag und Inhalt, um zu verstehen, was jeder Knoten enthält.

Übung

Welche Methode kann in JavaScript verwendet werden, um ein Attribut eines Elements zu ändern?

`element.setAttribute('id', 'newDiv')``element.modifyAttribute('id', 'newDiv')``element.changeAttribute('id', 'newDiv')``element.updateAttribute('id', 'newDiv')`