JavaScript and jQuery: Replace content of an element by using innerHTML

In this little mini tutorial I want to show you, how to replace the inner of an element in HTML with JavaScript and jQuery with any other new content.

Let's assume, that we have an element, for example this DIV here, that we have named with the id "test":

<div id="test">Old Content</div>

Now we want to replace the content of this element with the string "Hello World". For this, we want to look at a solution with JavaScript and another solution with jQuery.

The JavaScript Solution

document.getElementById("test").innerHTML = "Hello World";

In JavaScript, we can use the function getElementById() to select our element and to replace its content with "Hello World" like it is shown in the example.

The jQuery Solution

$("#test").html("Hello World");

Easier it will be, if we are using jQuery. Here it is sufficient to select our element with $("#test") and to use the function html() to change the innerHTML of the element.