JavaScript

How to Change HTML Element’s Content in JavaScript

HTML acronym of Hyper text mark up language is used to create structure of web pages you see on internet everyday. Meanwhile, Javascript is a well-known scripting language used to perform dynamic operations on web pages to make them more interactive.

An interesting HTML feature is HTML DOM short for Document Object Model. It is a programming API for HTML and XML documents. It is basically used to provide a logical structure to the documents.  It defines how an HTML document can be assessed and manipulated. It permits JavaScript to alter the content of HTML elements.

In this write-up we will discuss:

  1. Altering the content of HTML elements using JavaScript
  2. Altering HTML attribute value using JavaScript
  3. Usage of the document.write() method

Altering the content of HTML elements using JavaScript

The  innerHTML property is the quickest approach to alter the content of HTML elements. It iis explained in detail below:

innerHTML Property

The innerHTML property alters the content of an HTML element. In order to use this method use the following syntax.

Syntax of using innerHTML

document.getElementById(id).innerHTML = new HTML

Let us demonstrate the innerHTML property with an example.

Example 1

<!DOCTYPE html>
<html>
<body>

<p id="para1">This is a paragraph</p>

<script>
document.getElementById (para1). innerHTML = "This is a new paragraph!";
</script>
<p>The above paragraph was changed by innerHTML property</p>
</body>
</html>

In the above example, we are manipulating the <p> element by using the JavaScript innerHTML property. The paragraph has an id=”para1″. The HTML DOM uses this id to get the particular element and then change the content of <p> tag using innerHTML property. In this way the old paragraph is overwritten by the new paragraph. The output of the above example is as follows:

We can also change the <h> elements using this method. Lets do an example in which the innerHTML property changes the <h2> element using its id.

Example 2

<!DOCTYPE html>
<html>
<body>

<h2 id= "head2">Lets change this heading</h2>

<script>
const element = document.getElementById ("head2");
element.innerHTML = "This heading replaces the old one";
</script>

<p>The old heading has been changed</p>

</body>
</html>

In the above example HTML DOM uses the id=”head2″ to get the <h2> element and the innerHTML property changes the content of the element. The output is as follows.

Now let us discuss how we can change the value of an HTML attribute using JavaScript.

Altering Attribute Value

Using the the attribute name we can alter the value of HTML attribute.

Syntax

The syntax is shown below:

document.getElementById(id).attribute = new value

Lets demonstrate the above syntax using a suitable example.

<!DOCTYPE html>
<html>
<body>

<img id= "image1" src= "dogpic.jpg">

<script>
document.getElementById("image1").src="catpic.jpg";
</script>
<p>The dog image is changed to cat image</p>

</body>
</html>

In the above example, HTML DOM gets the img element by id=”image1″ then the JavaScript src attribute chages from a dogpic.jpg to a catpic.jpg.

Moving on to the last method which is document.write() method.

document.write()

document.write() is used to write HTML expressions or JavaScript code directly into HTML output stream. It will overwrite the document if you use this method after loading the HTML document. Lets try an example.

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph</p>

<script>
document.write(window.screen.height);
</script>

<p>This is another paragraph</p>

</body>
</html>

In the above example, the document.write() method shows the height of window screen as output.

Conclusion

HTML DOM provides certain properties that allow JavaScript to alter contents of HTML elements. In order to alter the contents of HTML elements, the innerHTML() property is used. You can also change the attribute value of HTML elements by directly using the attribute name. Meanwhile, the document.write ( ) property is used to write HTML expressions or JavaScript code directly into HTML output stream. This article discusses these properties in detail with relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.