Κόμβοι DOM JavaScript

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

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

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

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

Παράδειγμα

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

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

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

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

Αυτός ο κώδικας δημιουργεί ένα νέο στοιχείο <p>:

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

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

const node = document.createTextNode("This is a new paragraph.");

Στη συνέχεια, πρέπει να προσθέσετε τον κόμβο κειμένου στο στοιχείο <p>:

para.appendChild(node);

Τέλος, πρέπει να προσαρτήσετε το νέο στοιχείο σε ένα υπάρχον στοιχείο.

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

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

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

element.appendChild(para);

Δημιουργία νέων στοιχείων HTML - insertBefore()

Η μέθοδος appendChild() στο προηγούμενο παράδειγμα, προσάρτησε το νέο στοιχείο ως το τελευταίο παιδί του γονέα.

Εάν δεν το θέλετε, μπορείτε να χρησιμοποιήσετε τη μέθοδο insertBefore():

Παράδειγμα

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

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

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

Αφαίρεση υπαρχόντων στοιχείων HTML

Για να αφαιρέσετε ένα στοιχείο HTML, χρησιμοποιήστε το remove() μέθοδος:

Παράδειγμα

<div>
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>

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

<button onclick="myFunction()">Remove Element</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

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

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

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

Βρείτε το στοιχείο που θέλετε να αφαιρέσετε:

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>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Remove Child Element</p>

<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>

</body>
</html>

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

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

<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");

Βρείτε το στοιχείο <p> με id="p1":

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

Αφαιρέστε το παιδί από τον γονέα:

parent.removeChild(child);

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

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

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

Για να αντικαταστήσετε ένα στοιχείο στο HTML DOM, χρησιμοποιήστε τη μέθοδο replaceChild():

Παράδειγμα

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
 
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>

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

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>