JavaScript-Tutorial: Ausführliche Erklärung zum Aktualisieren, Einfügen und Ändern des Dom-Knoten-Instanzcodes

Aktualisieren

Nachdem wir einen DOM-Knoten erhalten haben, können wir ihn aktualisieren.

Sie können den Text des Knotens direkt ändern. Es gibt zwei Methoden:

Eine besteht darin, das innerHTML Attribut, diese Methode ist sehr leistungsfähig. Sie können nicht nur den Textinhalt eines DOM-Knotens ändern, sondern auch den Teilbaum innerhalb des DOM-Knotens über HTML-Fragmente ändern:

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置文本为abc:
p.innerHTML = &#39;ABC&#39;; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = &#39;ABC <span style="color:red">RED</span> XYZ&#39;;
// <p>...</p>的内部结构已修改

innerHTML, achten Sie bitte darauf, ob Sie HTML schreiben müssen. Wenn die geschriebene Zeichenfolge über das Netzwerk abgerufen wird, achten Sie auf die Zeichenkodierung, um XSS-Angriffe zu vermeiden. Die zweite besteht darin, die Attribute
innerText oder textContent zu ändern, sodass die Zeichenfolge automatisch HTML-codiert werden kann und nicht Beliebiges HTML-Tag:

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置文本:
p.innerText = &#39;<script>alert("Hi")</script>&#39;;
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>

innerText wird nicht zurückgegeben. Versteckt den Text des Elements, während textContent den gesamten Text zurückgibt. Beachten Sie außerdem, dass IE<9 textContent nicht unterstützt. Das Ändern von CSS ist ebenfalls ein häufig erforderlicher Vorgang. Das Attribut
style des DOM-Knotens entspricht allen CSS und kann direkt abgerufen oder festgelegt werden. Da CSS Namen wie font-size zulässt, es sich jedoch nicht um einen gültigen Eigenschaftsnamen in JavaScript handelt, muss er in JavaScript als Camel-Case-Namensgebung fontSize umgeschrieben werden :

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置CSS:
p.style.color = &#39;#ff0000&#39;;
p.style.fontSize = &#39;20px&#39;;
p.style.paddingTop = &#39;2em&#39;;

Einfügen

Wenn dieser DOM-Knoten leer ist, zum Beispiel

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</p>

JavaScript

var
  js = document.getElementById('js'),
  list = document.getElementById('list');
list.appendChild(js);

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="js">JavaScript</p>
</p>

var
  list = document.getElementById('list'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="haskell">Haskell</p>
</p>