JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript HTML DOM - Changing HTML

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

Changing HTML Content

The easiest way to change the content of an HTML element is by using the innerHTML property.

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

element.innerHTML = text

The following example changes the content of a <p> element with id="para":

Run code

The following example gets the content of a <p> element with id="para":

Run code

Changing Output Stream

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

Run code

This method writes the content to the current document only while that document is being parsed.

If you use the this method after the page has been loaded, it will overwrite all the existing content in that document.

Run code

Changing the Value of an Attribute

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

element.attribute = new value

The following example changes the value of the src attribute of an <img> element:

Click the buttons to change the avatar:
Run code

The following example gets the value of the href attribute of an anchor element:

Run code

Adding New Elements to DOM

You can explicitly create new element in an HTML document, using the document.createElement() method.

This method creates a new element, but it doesn't add it to the DOM; you'll have to do that in a separate step:

The appendChild() method adds the new element at the end of any other children of a specified parent node.

Run code

However, if you want to add the new element at the beginning of any other children you can use the insertBefore() method.

Run code

Removing Existing Elements from DOM

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

Run code