JavaScript Basic Tutorial

JavaScript Objects

JavaScript Functions

JS HTML DOM

JS Browser BOM

AJAX Basic Tutorial

JavaScript Reference Manual

JS DOM Change CSS JS HTML DOM Selectors

JS DOM Change HTML Content

HTML DOM allows JavaScript to get and change the content of HTML elements.

Change HTML content

The simplest way to change the content of an HTML element is to useinnerHTMLproperty.

To change the content of an HTML element, please use the following syntax:

element.innerHTML = text

The following examples useid="para" change<p>The content of the element:

Example

<!DOCTYPE html>
<html>
<p id="para"></p>
<script>
document.getElementById("para").innerHTML = "Hello world";
</script>
</html>

Test and See‹/›

The following exampleanchor elementid="para"of<p>The content of the element:

Example

<!DOCTYPE html>
<html>
<p id="para">This is a paragraph.</p>
<p id="result"></p>
<script>
var x = document.getElementById("para").innerHTML;
document.getElementById("result").innerHTML = x;
</script>
</html>

Test and See‹/›

change the output stream

document.write()method writes a text string to the document stream.

Example

<!DOCTYPE html>
<html>
<p>The document.write() method writes a text string to the document output stream:</p>
<script>
document.write(new Date());
</script>
</html>

Test and See‹/›

This method writes content to the current document only when the document is parsed.

If this method is used after the page is loaded, it will overwrite all existing content in the document.

Example

<button onclick="myFunc()">Click me</button>
<script>
function myFunc() {
　　document.write(new Date());
}
</script>

Test and See‹/›

Change the value of the attribute

To change the value of an HTML attribute, use the following syntax:

element.attribute = new value

The following examplechange<img>elementsrcattribute value:

Click the button to change the avatar:

The following exampleanchor elementto get thehrefattribute value:

Example

var x = document.getElementById("demo").href;

Test and See‹/›

to add a new element to the DOM

You can usedocument.createElement()method explicitly creates a new element in the HTML document.

This method creates a new element but does not add it to the DOM. You must perform this operation in a separate step:

　　//　Create a new h3element
　　var newElem = document.createElement("h3");
　　//　and give it some content
　　var newContent = document.createTextNode("Hello, everyone!");

appendChild()The method adds the new element to any other child node of the specified parent nodeend.

Example

//　Add text nodes to the newly created h3
newElem.appendChild(newContent);　　
//　Add the newly created element and its content to the DOM
document.body.appendChild(newElem);

Test and See‹/›

However, if you want to add it to any other sub-itembeginningTo add a new element, you can use theinsertBefore()method.

Example

//Create a new h3element
var newElem = document.createElement("h3");
//　Give it some content
var newContent = document.createTextNode("Hi there and greetings!");
//　Add text nodes to the newly created h3
newElem.appendChild(newContent);　　
//　Get the Body
var body = document.body;
//　Insert H3　before the first child of the BODY
body.insertBefore(newElem, body.childNodes[0]);

Test and See‹/›

to remove an existing element from the DOM

Similarly, you can use theremoveChild()Method to remove a child node from the DOM.

Example

var div = document.getElementById("demo");
div.removeChild(div.firstElementChild);

Test and See‹/›

JS DOM Change CSS JS HTML DOM Selectors