In the world of dynamic web engineering, users interact with a webpage and update the text inside an HTML division (div) element is popular. For example, an asynchronous call will render an HTML template to display a bundle of text after validating in a submission form; or clicking on a button to render a box where the instructions are shown. In this article, we’ll look at ways to replace text or html content of a div element with JavaScript and jQuery.

Which properties and functions we can use?

innerHTML property

According to MDN web docs, the innerHTML property is used to get and set HTML or XML markup contained within the element. More precisely, innerHTML gets a serialisation of the nested child DOM elements within the element, or sets HTML or XML that should be parsed to replace the DOM tree within the element. Therefore, using this property to replace the inner content of a div element is applicable.

html() function

Using jQuery, the equivalent way is to use html() function to add an HTML marked up content to the div element.

innerText property

From MDN docs, this property represents the rendered text content of a node and its descendants. It isn’t aware of HTML marked up content, so HTML tags and formats will be ignored.

text() function

The equivalent way in jQuery to innerText in JavaScript is the text() function. It isn’t aware of HTML marked up content, so HTML tags and formats will be ignored.

textContent property

The textContent property of the Node interface represents the text content of the node and its descendants. It isn’t aware of HTML marked up content, so HTML tags and formats will be ignored.

Demonstrations

JavaScript codes

<h2>Three buttons will load the same content</h2>
<input type="button" value="Load content via textContent" onclick="addTextContent()">
<div id="container1">

</div>
<br/>
<input type="button" value="Load content via innerHTML" onclick="addInnerHTML()">
<div id="container2">

</div>
<br/>
<input type="button" value="Load content via innerText" onclick="addInnerText()">
<div id="container3">

</div>

<script>
    const content = "<span style='font-weight: bolder; color: blue'>This text is added to innerHTML.</span>";

    function addTextContent() {
        document.getElementById('container1').textContent = content;
    }

    function addInnerHTML() {
        document.getElementById('container2').innerHTML = content;
    }

    function addInnerText() {
        document.getElementById('container3').innerText = content;
    }
</script>

See the screenshot below to understand the look and feel of three use cases.

jQuery codes

Notes: jQuery doesn’t have content function to be equivalent to the content property.

<script>
    const content = "<span style='font-weight: bolder; color: blue'>This text is added to innerHTML.</span>";

    function addTextContent() {
        //document.getElementById('container1').textContent = content;
        $('#container1').content(content); // don't work
    }

    function addInnerHTML() {
        //document.getElementById('container2').innerHTML = content;
        $('#container2').html(content);
    }

    function addInnerText() {
        //document.getElementById('container3').innerText = content;
        $('#container3').text(content);
    }
</script>

Wrap up

References

[1] How to replace text inside a div element with JavaScript, https://plainenglish.io/blog/how-to-replace-text-inside-a-div-element-with-javascript, accessed on Jan 11th, 2024

[2] HTMLElement, https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement, accessed on July 11th, 2025