Htmldom Elements

* * * Adding, deleting, and replacing HTML elements. * * * ## Creating New HTML Elements - createElement() To add a new element to the HTML DOM, you must first create the element and then append it to an existing one. ## Example

This is a paragraph.

This is another paragraph.

var para=document.createElement("p"); var node=document.createTextNode("This is a new paragraph."); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); [Try it »](#) * * * ## Example Explanation This code creates a new

element: var para=document.createElement("p"); To add text to the

element, you must first create a text node. This code creates the text node: var node=document.createTextNode("This is a new paragraph."); Then you must append the text node to the

element: para.appendChild(node); Finally, you must append this new element to an existing one. This code finds an existing element: var element=document.getElementById("div1"); This code appends the new element to the existing one: element.appendChild(para); * * * ## Creating New HTML Elements - insertBefore() In the previous example, the appendChild() method adds the new element as the last child of the parent element. If you don't want this behavior, you can use the insertBefore() method: ## Example

This is a paragraph.

This is another paragraph.

var para=document.createElement("p"); var node=document.createTextNode("This is a new paragraph."); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.insertBefore(para,child); [Try it »](#) * * * ## Deleting Existing HTML Elements To delete an HTML element, you must know its parent element: ## Example

This is a paragraph.

This is another paragraph.

var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); [Try it »](#) * * * ## Example Explanation This HTML document contains a

element with two child nodes (two

elements):

This is a paragraph.

This is another paragraph.

Find the element with id="div1": var parent=document.getElementById("div1"); Find the

element with id="p1": var child=document.getElementById("p1"); Remove the child from the parent: parent.removeChild(child); | ![Image 1: lamp](#) | Can an element be deleted without referencing its parent? Sorry, that's not possible. The DOM needs to know both the element you want to remove and its parent. | | --- | Here’s a common workaround: find the child element you want to delete, then use the parentNode property to locate its parent: var child=document.getElementById("p1"); child.parentNode.removeChild(child); * * * ## Replacing HTML Elements To replace an element in the HTML DOM, use the replaceChild() method: ## Example

This is a paragraph.

This is another paragraph.

var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("This is a new paragraph."); para.appendChild(node); parent.replaceChild(para,child); [Try it »](#)

YouTip

Htmldom Elements

📂 Categories