Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


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


<!DOCTYPE html> 
        How to append data to
        div using JavaScript ?
    <meta charset="utf-8"
    <meta name="viewport"
        content="width=device-width, initial-scale=1"
    <link rel="stylesheet" href
    <div class="container"
        <h1 style="text-align:center;color:green;"
            <div class="form-group"
                <label for="">Enter Your Name:</label
                <input id="name" class="form-control"
                    placeholder="Input Your Name Here"
            <div class="form-group text-center"
                <button id="my_button"
                    class="btn btn-outline-success btn-lg"
                    Add Name 
        <h3>List of Names:</h3>
        <div id="my_div"></div>
        function append_to_div(div_name, data){
            document.getElementById(div_name).innerText += data;
                .addEventListener('click', function() {
            var user_name = document.getElementById("name");
            var value = user_name.value.trim();
                alert("Name Cannot be empty!");
                append_to_div("my_div", value+"\n");
            user_name.value = "";


  • Before Adding the Data:
  • After Adding the Data:

My Personal Notes arrow_drop_up
Last Updated : 11 Oct, 2019
Like Article
Save Article
Similar Reads
Related Tutorials