JavaScript HTML DOM 元素（节点）

Προσθήκη και διαγραφή στοιχείων (στοιχεία HTML)

Δημιουργία νέου στοιχείου HTML (πρότυπο)

Για να προσθέσετε νέο στοιχείο στο HTML DOM, πρέπει πρώτα να δημιουργήσετε αυτό το στοιχείο (πρότυπο στοιχείου), και μετά να το προσθέσετε σε υπάρχον στοιχείο.

Παράδειγμα

<div id="div1">
<p id="p1">Αυτό είναι ένας παράγραφος.</p>
<p id="p2">Αυτό είναι ένας άλλος παράγραφος.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Αυτό είναι το νέο κείμενο.");
para.appendChild(node);
insertBefore()
var element = document.getElementById("div1");appendChild(para);
</script>

Δοκιμάστε το προσωπικά

παράδειγμα εξήγησης

这段代码创建了一个新的 <p> στοιχείο:

var para = document.createElement("p");

Αυτός ο κώδικας δημιουργεί έναν νέο <p> Για να προσθέσετε κείμενο, πρέπει να δημιουργήσετε έναν νέο

Προσθήκη κειμένου στο στοιχείο, πρέπει πρώτα να δημιουργήσετε έναν κόμβο κειμένου. Αυτός ο κώδικας δημιουργεί έναν κόμβο κειμένου:

var node = document.createTextNode("Αυτό είναι ένας νέος στίχος."); <p> τότε πρέπει να προσθέσετε το

para.appendChild(node);

Προσθήκη στοιχείου που περιέχει το κείμενο:

Τελικά πρέπει να προσθέσετε αυτό το νέο στοιχείο στο υπάρχον στοιχείο.

insertBefore()

Αυτό το κομμάτι κώδικα αναζητά έναν υπάρχοντα στοιχείο:

Αυτό το κομμάτι κώδικα προσθέτει νέο στοιχείο σε αυτόν τον υπάρχοντα στοιχείο:

element.appendChild(para);

δημιουργία νέου HTML στοιχείου - insertBefore() Στο παρακάτω παράδειγμα appendChild()

για να προσθέσετε νέο στοιχείο ως τον τελευταίο υποκείμενο του γονικού. Επιπλέον, μπορείτε να χρησιμοποιήσετε τη μέθοδο Μέθοδος:

Παράδειγμα

<div id="div1">
<p id="p1">Αυτό είναι ένας παράγραφος.</p>
<p id="p2">Αυτό είναι ένας άλλος παράγραφος.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Αυτό είναι το νέο κείμενο.");
para.appendChild(node);
insertBefore()
var child = document.getElementById("p1");
var element = document.getElementById("div1");element.(para, child);
</script>

Δοκιμάστε το προσωπικά

insertBefore

διαγραφή υπάρχοντος HTML στοιχείου remove() Μέθοδος:

Παράδειγμα

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
Για να διαγράψετε ένα HTML στοιχείο, χρησιμοποιήστε το
</script>

Δοκιμάστε το προσωπικά

παράδειγμα εξήγησης

const elmnt = document.getElementById("p1"); elmnt.remove(); <p> στοιχείο) <div> στοιχείο:

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

Αυτός ο HTML έγγραφο περιέχει έναν κόμβο με δύο υποκείμενα (δύο

βρείτε το στοιχείο που πρέπει να διαγραφεί:

const elmnt = document.getElementById("p1"); remove() Μέθοδος:

τότε εκτελέστε το

elmnt.remove();Λάβετε υπόψη: Η μέθοδος remove() δεν λειτουργεί σε παλιούς περιηγητές, παρακαλώ δείτε τον παρακάτω παράδειγμα για να μάθετε πώς να την αντικαταστήσετε μεremoveChild()

。

διαγραφή υποκείμενων remove() για να διαγράψετε ένα στοιχείο, πρέπει να βρείτε τον γονικό κόμβο σε έναν περιηγητή που δεν υποστηρίζει

Παράδειγμα

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

Δοκιμάστε το προσωπικά

παράδειγμα εξήγησης

Αυτός ο HTML έγγραφο περιέχει έναν κόμβο με δύο υποκείμενα (δύο <p> στοιχείο) <div> στοιχείο:

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

βρίσκει: id="div1" στοιχείο:

const parent = document.getElementById("div1");

βρίσκει: id="p1" του <p> στοιχείο:

const child = document.getElementById("p1");

Αφαίρεση υποκείμενου από το γονικό στοιχείο:

parent.removeChild(child);

Αυτό είναι ένα συχνό τρόπο λύσης: βρείτε το υποκείμενο που πρέπει να διαγραφεί και χρησιμοποιήστε το parentNode Αντίληψη βρίσκει το γονικό κόμβο:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

Αντικατάσταση HTML στοιχείων

Για να αντικαταστήσετε το στοιχείο replaceChild() Μέθοδος:

Παράδειγμα

<div id="div1">
<p id="p1">Αυτό είναι ένας παράγραφος.</p>
<p id="p2">Αυτό είναι ένας άλλος παράγραφος.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Αυτό είναι το νέο κείμενο.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Δοκιμάστε το προσωπικά