1. Home
  2. JavaScript HTML DOM elements

The best JavaScript HTML DOM elements Tutorial In 2024, In this tutorial you can learn Create a new HTML element,Examples,Examples of analysis:,Remove the existing HTML elements,Examples,Examples of analytical,HTML DOM Tutorial,

JavaScript HTML DOM elements

Create a new HTML element

Create a new HTML element

To add a new element to the HTML DOM, you must first create the element (an element node), and then append the element to an existing element.

Examples

<Div id = "div1">
<P id = "p1"> This is a paragraph. </ P>
<P id = "p2"> This is another paragraph. </ P>
</ Div>

<Script>
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);
</ Script>


Examples of analysis:

This code creates a new <p> element:

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

To add text to the <p> element, you must first create a text node. This code creates a text node:

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

Then you must add this text node to the <p> element:

para.appendChild (node);

Finally, you must add this new element to an existing element.

The code to find an existing element:

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

The following code after the existing elements add a new element:

element.appendChild (para);

Remove the existing HTML elements

The following code demonstrates how to delete elements:

Examples

<Div id = "div1">
<P id = "p1"> This is a paragraph. </ P>
<P id = "p2"> This is another paragraph. </ P>
</ Div>

<Script>
var parent = document.getElementById ( "div1");
var child = document.getElementById ( "p1");
parent.removeChild (child);
</ Script>



Examples of analytical

The HTML document containing the child nodes have two (two <p> element) of the <div> element:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

Find id = "div1" elements:

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

Find id = "p1" the <p> element:

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

Remove from the parent element sub-elements:

parent.removeChild(child);

lamp If you can remove an element without a reference to the parent element, it would be great.
But unfortunately. DOM elements that you need to know to be deleted, as well as its parent element.

This is a common solution: find the child element you want to delete, and then use its properties to find parentNode parent element:

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

HTML DOM Tutorial

In the HTML DOM part of our JavaScript tutorial, you have learned:

  • How to change the content of the HTML element (innerHTML)
  • How to change the style of HTML elements (CSS)
  • How to react to events on the HTML DOM
  • How do I add or remove HTML elements

If you want to learn more about using JavaScript to access the HTML DOM knowledge, please visit our complete HTML DOM tutorial .

Hot Tools

Other Tools

Online Tutorial

Website Navigation

JavaScript HTML DOM elements
10/30