Section Artikel
Metode appendChild() menambahkan child node ke node yang sudah ada.
Node baru ditambahkan (ditambahkan) setelah node turunan yang ada.
Catatan: Gunakan insertBefore () jika posisi node penting.
Fragmen kode ini membuat elemen (<edition>), dan menambahkannya setelah anak terakhir dari elemen <book> pertama:
Contoh :
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, y, i, newElement, txt, xmlDoc; xmlDoc = xml.responseXML; newElement = xmlDoc.createElement("edition"); x = xmlDoc.getElementsByTagName("book")[0] x.appendChild(newElement); // Display all elements xlen = x.childNodes.length; y = x.firstChild; txt = ""; for (i = 0; i < xlen; i++) { if (y.nodeType == 1) { txt += y.nodeName + "<br>"; } y = y.nextSibling; } document.getElementById("demo").innerHTML = txt; } </script> </body> </html>
Output :
Penjelasan Kode :
Fragmen kode ini melakukan hal yang sama seperti di atas, tetapi elemen baru ditambahkan dengan nilai:
Contoh :
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, y, z, i, xLen, yLen, newEle, newText, xmlDoc, txt; xmlDoc = xml.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("book"); xLen = x.length; for (i = 0; i < xLen; i++) { newEle = xmlDoc.createElement("edition"); newText = xmlDoc.createTextNode("first"); newEle.appendChild(newText); x[i].appendChild(newEle); } // Output all titles and editions y = xmlDoc.getElementsByTagName("title"); yLen = y.length z = xmlDoc.getElementsByTagName("edition"); for (i = 0; i < yLen; i++) { txt += y[i].childNodes[0].nodeValue + " - Edition: " + z[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("demo").innerHTML = txt; } </script> </body> </html>
Output :
Penjelasan Kode :
Metode insertBefore () menyisipkan node sebelum child node yang ditentukan.
Metode ini berguna ketika posisi node yang ditambahkan penting:
Contoh :
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var newNode = xmlDoc.createElement("book"); var x = xmlDoc.documentElement; var y = xmlDoc.getElementsByTagName("book"); document.getElementById("demo").innerHTML = "Book elements before: " + y.length + "<br>"; x.insertBefore(newNode, y[3]); document.getElementById("demo").innerHTML += "Book elements after: " + y.length; } </script> </body> </html>
Output :
Penjelasan Kode :
Jika parameter kedua dari insertBefore() adalah null, node baru akan ditambahkan setelah last child node yang ada.
x.insertBefore (newNode, null)
dan x.appendChild (newNode)
keduanya akan menambahkan child node baru ke x.
Metode setAttribute () menetapkan nilai atribut.
Contoh :
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var x = xmlDoc.getElementsByTagName("title"); x[0].setAttribute("edition", "first"); document.getElementById("demo").innerHTML = "Edition: " + x[0].getAttribute("edition"); } </script> </body> </html>
Output :
Penjelasan Kode :
Tidak ada metode yang disebut add Attribute ()
SetAttribute() akan membuat atribut baru jika atribut tidak ada.
Catatan: Jika atribut sudah ada, metode setAttribute () akan menimpa nilai yang sudah ada.
Metode insertData() memasukkan data ke dalam node teks yang ada.
Metode insertData() memiliki dua parameter:
Fragmen kode berikut akan menambahkan “Easy” ke text node dari elemen <title> pertama dari XML yang dimuat:
Contoh :
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, txt, xmlDoc; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("title")[0].childNodes[0]; txt = x.nodeValue + "<br>"; x.insertData(0,"Easy "); txt += x.nodeValue; document.getElementById("demo").innerHTML = txt; } </script> </body> </html>
Output :