How to Append Text to a DIV using JavaScript

When working with JavaScript, the ability to dynamically append text to a `<div>` element is a valuable skill. Whether you're building interactive web applications or updating content on the fly, appending text to a `<div>` can be achieved through various methods.

In this article, we will explore three different approaches to accomplish this task using JavaScript. By understanding these methods, you will gain the knowledge and confidence to seamlessly integrate dynamic text appending into your web projects. So, let's delve into the techniques and learn how to append text to a `<div>` using JavaScript.

01. Using "textContent"
02. Using "innerHTML"
03. Using "appendChild()"

01. Using "textContent":

In this method, we first obtain a reference to the <div> element using document.getElementById(). Then, we utilize the textContent property to append the desired text to the <div>. The += operator concatenates the existing content of the <div> with the new text.

<!DOCTYPE html>
<html>
<head>
  <title>How to Append Text to a DIV Using JavaScript</title> 
</head>

<body>
  
 <button onclick="appendTextFunction()">Click Me</button>
 <div id="container"></div>

 
<script>
function appendTextFunction() {
  // Get the reference to the div element
  var container = document.getElementById("container");

  // Append the text using textContent
  container.textContent += "This is the appended text using textContent method.";
}

</script>

</body>
</html>

Read Also:

02. Using "innerHTML":

With this method, we follow a similar approach of obtaining the <div> element reference. However, we utilize the innerHTML property to append the desired text. The += operator concatenates the existing content of the <div> with the new text. This method is especially useful when you want to append HTML markup along with the text.

<!DOCTYPE html>
<html>
<head>
  <title>How to Append Text to a DIV Using JavaScript</title> 
</head>

<body>
  
 <button onclick="appendTextFunction()">Click Me</button>
 <div id="container"></div>

 
<script>
function appendTextFunction() {
  // Get the reference to the div element
  var container = document.getElementById("container");

  // Append the text using innerHTML
  container.innerHTML  += "This is the appended text using innerHTML method.";
}

</script>

</body>
</html>

Read Also:

03. Using "appendChild()":

In this method, we again obtain the reference to the <div> element. Then, we create a new text node using document.createTextNode(). Finally, we use the appendChild() function to append the text node to the <div>. This method is particularly useful when you need to append dynamically generated or manipulated text content to an element.

<!DOCTYPE html>
<html>
<head>
  <title>How to Append Text to a DIV Using JavaScript</title> 
</head>

<body>
  
 <button onclick="appendTextFunction()">Click Me</button>
 <div id="container"></div>

 
<script>
function appendTextFunction() {
  // Get the reference to the div element
  var container = document.getElementById("container");

  // Create a new text node
  var textNode = document.createTextNode("This is the appended text using appendChild.");

  // Append the text node to the div
  container.appendChild(textNode);
}

</script>

</body>
</html>

Read Also:

Archive