Home > Article > Web Front-end > Detailed explanation of how JavaScript operates HTML elements and styles_Basic knowledge

Detailed explanation of how JavaScript operates HTML elements and styles_Basic knowledge

WBOYOriginal: 2016-05-16 15:35:471194browse

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

<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 new.");
para.appendChild(node);

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

Example analysis:
This code creates a new e388a4556c0f65e1904146cc1a846bee element:

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

To add text to a e388a4556c0f65e1904146cc1a846bee 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 have to append this text node to the e388a4556c0f65e1904146cc1a846bee element:

para.appendChild(node);

Finally you must append the new element to an existing element.
This code finds an existing element:

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

The following code adds a new element after an existing element:

element.appendChild(para);

Delete existing HTML elements
This code appends a new element to this existing element:
Example

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

Example analysis
This HTML document contains a dc6dce4a544fdca2df29d5ac0ea9906b element with two child nodes (two e388a4556c0f65e1904146cc1a846bee elements):

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

Find the element with id="div1":

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

Find the e388a4556c0f65e1904146cc1a846bee element with id="p1":

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

Remove child elements from parent elements:

parent.removeChild(child);

lamp It would be great if you could delete an element without referencing the parent element.
But it's a pity. The DOM needs to know the element you need to delete, and its parent element.
This is a common solution: find the child element you wish to remove and then use its parentNode property to find the parent element:

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

JavaScript HTML DOM - Changing CSS
The HTML DOM allows JavaScript to change the style of HTML elements.
Change HTML style
To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property=new style
The following example changes the style of the e388a4556c0f65e1904146cc1a846bee element:
Example

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

This example changes the style of the HTML element with id="id1" when the user clicks the button:
Example

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief discussion on async asynchronous programming in node.js_node.jsNext article：A brief discussion on async asynchronous programming in node.js_node.js

See more

Detailed explanation of how JavaScript operates HTML elements and styles_Basic knowledge

Related articles