September 30, 2021

How to Add innerHTML in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to add innerHTML in javascript. An element contains a bunch of DOM properties and innerHTML is one of them. The innerHTML property is used to set HTML content of an element.

Please make sure that the HTML content should be in a string format and must contain valid HTML tags. All the elements specified in the HTML content will act as child elements and the main element will act as the parent element.

In the following example, we have 2 elements, textarea and button. I am going to demonstrate here 2 scenarios of setting a text as innerHTML of an element. In the first scenario, we will enter some text in the textarea with valid HTML tags. As we are typing, we will set it as the innerHTML of an element.

In the second scenario, we have one hard-coded string with valid HTML tags. Upon click of a button, we will set it as the innerHTML of an element. The output of both scenarios will be shown on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and textarea).
The innerText for the button element is “ADD”.
The div element with a class of container is just a wrapper for the textarea element and output div element.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <button>ADD</button>
    <div class="container">
        <textarea id="input" cols="30" rows="10" placeholder="Enter HTML"></textarea>
        <div id="output"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
}

#output {
    height: 250px;
    width: 250px;
    border: 1px solid black;
    padding: 5px;
    margin-left: 20px;
}

button {
    width: 520px;
    margin-bottom: 20px;
}

Javascript

We have selected the input, div, and button elements using the document.querySelector() method and stored them in the input, output, and button variables respectively.
We have attached the keyup event listener to the input element.
In the keyup event handler function, we are getting text content from textarea using value property and setting it as innerHTML of the output div element.

We have attached the click event listener to the button element.
In the click event handler function, we have one hard-coded template string with valid HTML tags assigned to the template variable.
We are setting that template string as innerHTML of the output div element.

let input = document.querySelector('#input');
let output = document.querySelector('#output');
let button = document.querySelector('button');

input.addEventListener('keyup', () =>{
    output.innerHTML = input.value;
})

button.addEventListener('click', () => {
    let template = `
        <ul>
        <li style="color:red;">Red</li>
        <li style="color:green;">Green</li>
        <li style="color:blue;">Blue</li>
        </ul>
    `;
    output.innerHTML = template;
});

You May Also Like: