How to append data to element using JavaScript ?

0 0 1 minute read

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:

<!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;">  
            zambiatek  
        </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> 