How to display text in div using JavaScript

To display text in a div element using JavaScript, you can use the textContent property of the div element. The example is given below.

const myDiv = document.querySelector('.my-div');
myDiv.textContent = "New Text"

In this example, we first retrieve the div element with the class "my-div" using the querySelector() method. Then, we set the textContent property of the div element to "New Text". This will replace any existing text content in the div element with the new text.

Alternatively, you can also use the innerHTML property to set the HTML content of the div element.

const myDiv = document.querySelector('.my-div');
myDiv.innerHTML = "<p>New Text</p>";

In this example, we set the innerHTML property of the div element to a paragraph element containing the text "New Text". This will replace any existing content in the div element with the new HTML content.

How to display text in div using JavaScript #

1. Get the div element by its id using document.getElementById() method and set its text content using the textContent property.

   <div id="my-div">This is an element.</div>
   
     <script>
    const myDiv = document.getElementById('my-div');
    myDiv.textContent = "New Text";
   </script>

   Try it Yourself »
2. Get the div element by its class using document.querySelector() method and set its HTML content using the innerHTML property.

   <div id="my-div">This is an element.</div>
     
     <script>
    const myDiv = document.querySelector('.my-div');
    myDiv.innerHTML = "<p>New Text</p>";
   </script>

   Try it Yourself »
3. Use createElement() and createTextNode() methods to create new text node and append it to the div element using the appendChild() method.
4. Use insertAdjacentHTML() method to insert HTML content into a specified position around the div element.