JavaScript innerHTML append

In JavaScript, you can use the innerHTML property of an HTML element to set or get the HTML content of that element. If you want to append new HTML content to an existing element’s content using innerHTML, you can simply concatenate the new HTML content with the existing innerHTML value.

var element = document.getElementById("element-id");
element.innerHTML += "new content";

JavaScript innerHTML append example

Simple example code += operator is used to concatenate the new content with the existing content.

<!DOCTYPE html>
<html>
<head>
  <title>Append Content with JavaScript</title>
</head>
<body>
  <div id="myDiv">
    <p>Existing content</p>
  </div>
  <button onclick="appendContent()">Append content</button>

  <script>
    function appendContent() {
      var myDiv = document.getElementById("myDiv");
      myDiv.innerHTML += "<p>New content</p>";
    }
  </script>
</body>
</html>

Output:

Note: using innerHTML to append content can be inefficient and potentially insecure, especially when dealing with user-generated content. It may be better to consider using other DOM manipulation methods, such as appendChild(), insertBefore(), or createElement(), depending on your specific use case.

Is it possible to append to innerHTML without destroying descendants’ event listeners?

Answer: Yes, it is possible to append to innerHTML without destroying descendants’ event listeners, but it can be tricky to do so correctly.

When you use innerHTML to modify an element’s content, the entire content of that element is replaced with the new HTML code that you provide. This means that any event listeners attached to descendant elements of the modified element will be lost.

<div id="myDiv">
  <button id="myButton">Click me</button>
</div>

<script>
  // Add a click event listener to the button
  var myButton = document.getElementById('myButton');
  myButton.addEventListener('click', function() {
    alert('Button clicked!');
  });

  // Append new content to the div using insertAdjacentHTML
  var myDiv = document.getElementById('myDiv');
  myDiv.insertAdjacentHTML('beforeend', '<p>New content</p>');
</script>

How can I append new/updated innerHTML to a p tag that doesn’t have a class or id?

Answer: For that, you have to traverse of the DOM tree.

Access the first p element on the page:

var pTag = document.getElementsByTagName("p")[0];
pTag.innerHTML += "new content";

Access the first p element within a specific container element:

<div id="container">
  <p>existing content</p>
</div>

var container = document.getElementById("container");
var pTag = container.getElementsByTagName("p")[0];
pTag.innerHTML += "new content";

Traverse the DOM tree to find the p element:

<body>
  <div>
    <p>existing content</p>
  </div>
  <div>
    <p>target p tag</p>
  </div>
</body>

var pTag = document.body.getElementsByTagName("div")[1].getElementsByTagName("p")[0];
pTag.innerHTML += "new content";

Comment if you have any doubts or suggestions on this JS HTML element topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

JavaScript innerHTML append