Example
Replace a text node in an
const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);
Definition and Usage
The replaceChild() method replaces a child node with a new node.
Syntax
node.replaceChild(newnode, oldnode)
Parameters
ParameterDescriptionnewnodeRequired.The node to insert.oldnodeRequired.
The node to remove.
Return Value
TypeDescriptionNodeThe replaced node.More Examples
Example
Replace an
// Create a new
const element = document.createElement("li");
// Create a new text node:
const textNode = document.createTextNode("Water");
// Append the text node to the
element.appendChild(textNode);
// Get the
- element with id="myList":
- element:
list.replaceChild(element, list.childNodes[0]);Try it Yourself »
const list = document.getElementById("myList");
// Replace the first child node with the new
Browser Support
element.replaceChild() is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
ChromeEdgeFirefoxSafariOperaIEYesYesYesYesYes9-11Setelah kita membuat elemen pada Javascript dengan createElement maka pembelajaran Javascript kita sampai kepada replaceChild dan removeChild. Seperti namanya replaceChild ini berarti parent akan melakukan penggantian child, sedangkan removeChild ini berarti parent akan menghapus child. Kita akan membuat source code HTML, source code Javascript dan tampilan yang dihasilkan.
Source code HTML yang akan kita gunakan adalah seperti berikut ini:
<ul id=”makan_siang”> Menu Sehat:
<li id=”menu1″>Nasi</li>
<li id=”menu2″>Ayam</li>
<li id=”menu3″>Daging</li>
<li id=”menu4″>Soda Dingin</li>
<li id=”menu5″>Air Putih</li>
</ul>
Source code Javascriptnya adalah seperti berikut ini:
//buat sayuran let sayuran = document.createElement('li'); sayuran.innerHTML = 'Sayuran'; menu3 = document.querySelector('#menu3'); let makan_siang = document.querySelector('#makan_siang'); //ganti menu3 dengan sayuran makan_siang.replaceChild(sayuran,menu3); //menu4 itu Soda Dingin menu4 = document.querySelector('#menu4'); makan_siang.removeChild(menu4);Hasilnya dapat dilihat di //js.aris.proweb.asia/3-7-1-replace-remove.html dengan tampilan seperti berikut ini:
Informasi lebih lanjut silahkan mengunjungi:
1. //www.w3schools.com/jsref/met_node_replacechild.asp .
2. //www.w3schools.com/jsref/met_node_removechild.asp .
3. //www.w3schools.com/jsref/met_document_createelement.asp .
4. //www.w3schools.com/jsref/prop_html_innerhtml.asp .
Kunjungi www.proweb.co.id untuk menambah wawasan anda .
ReplaceChild dan removeChild pada Javascript
arisg August 20, 2019August 20, 2019 Javascript
Metode Node.replaceChild() (Core Level 1) mengganti oldChild di dalam daftar children dengan newChild, dan mengembalikan oldChild.
Sintaks:
Node.replaceChild(newChild, oldChild)
- Parameter newChild berisi Node gres sebagai pengganti Node lama.
- Parameter oldChild berisi rujukan ke Node usang di dalam daftar children yang ingin diganti.
Metode Node.replaceChild() di dukung oleh secara umum dikuasai browser: IE, Opera, Firefox, Google Chrome, dan Safari.
Contoh:
- Mango
- Orange
Coba jalankan demo di bawah ini:
Ganti ‘Mango’ dengan ‘Banana’Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
The DOMNode::replaceChild() function is an inbuilt function in PHP which is used replace the old child node with the passed new node. Further, if the new node is already a child it will not be added the second time. If the replacement succeeds the old node is returned.
Syntax:
DOMNode DOMNode::replaceChild( DOMNode $newnode, DOMNode $oldnode )Parameters: This function accept two parameters as mentioned above and described below:
- $newnode: It specifies the new node.
- $oldnode: It specifies the old node.
Return Value: This function returns old node or FALSE if an error occur.
Exceptions: This function throws DOM_NO_MODIFICATION_ALLOWED_ERR, if this node is read-only or if the previous parent of the node being inserted is read-only, DOM_HIERARCHY_REQUEST_ERR, if this node is of a type that does not allow children of the type of the $newnode node, or if the node to put in is one of this node’s ancestors or this node itself, DOM_WRONG_DOCUMENT_ERR, if $newnode was created from a different document than the one that created this node, DOM_NOT_FOUND, if $oldnode is not a child of this node.