How to append data to <div> element using JavaScript ?

Last Updated : 11 Oct, 2019

To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div. Syntax:

document.getElementById("div_name").innerText += "Your Data Here";

Example:

html

<!DOCTYPE html> 
<html> 

<head> 
    <title>
        How to append data to
        div using JavaScript ?
    </title> 
    
    <meta charset="utf-8"> 
    
    <meta name="viewport"
        content="width=device-width, initial-scale=1"> 
    
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head> 

<body> 
    <div class="container"> 
        <h1 style="text-align:center;color:green;"> 
            GeeksforGeeks 
        </h1> 
        
        <hr>
        
        <form> 
            <div class="form-group"> 
                <label for="">Enter Your Name:</label> 
                <input id="name" class="form-control"
                    type="text"
                    placeholder="Input Your Name Here"> 
            </div>
            
            <div class="form-group text-center"> 
                <button id="my_button"
                    class="btn btn-outline-success btn-lg"
                        type="button"> 
                    Add Name 
                </button> 
            </div> 
        </form> 
        
        <h3>List of Names:</h3>
        <div id="my_div"></div>
    </div> 
    
    <script>
        function append_to_div(div_name, data){
            document.getElementById(div_name).innerText += data;
        }
        
        document.getElementById("my_button")
                .addEventListener('click', function() {
            
            var user_name = document.getElementById("name");
            var value = user_name.value.trim();
            
            if(!value)
                alert("Name Cannot be empty!");
            else
                append_to_div("my_div", value+"\n");
            
            user_name.value = "";
        });
    </script>
    
</body> 

</html>