Replace the contents of an HTML element (HTML + JavaScript)

Setting the value of innerHTML lets you easily replace the existing contents of an element with new content.

For example, you can erase the entire contents of a document by clearing the contents of the document’s body attribute:

document.body.innerHTML = "";

This example fetches the document’s current HTML markup and replaces the "<"characters with the HTML entity "&lt;", thereby essentially converting the HTML into raw text. This is then wrapped in a <pre> element. Then the value of innerHTML is changed to this new string. As a result, the document contents are replaced with a display of the page’s entire source code.

document.documentElement.innerHTML = "<pre>" +
         document.documentElement.innerHTML.replace(/</g,"&lt;") +
            "</pre>";

Replace the existing content of all the elements of the desired class with a new content:

<script>
    var i;

    for (i = 0; i < document.getElementsByClassName("button").length; i++) {

        if (document.getElementsByClassName('button')[i].innerHTML == 'Continue Reading →'){

        var yourHTML = 'MORE INFO / PHOTOS →';
        document.getElementsByClassName('button')[i].innerHTML = yourHTML;

        }
    }
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *