Question

5

How to create a div using JavaScript?

rated 0 times [ 6] [ 1] / answers: 1 / hits: 7581 / 3 Years ago, mon, september 6, 2021, 12:00:00

I have the following <div> which I have created using HTML and CSS. I don't want these divs to be created when the page loads, instead I would like them to be created only when a JavaScript function is executed.

I would prefer if they were actually created by the function, if
possible, rather than being hidden/unhidden

Is there a way I can add this exact HTML code inside the function, or will I need to use JavaScript to create these divs? If I need to use JavaScript would someone be able to explain how?

HTML

   <div class = 'rowcontainer' id = "r<?php echo $studentid ?>" >

       <div class = 'name'><t><?php echo $firstname," ",$lastname; ?></t></div>

       <div class = 'ako'><t><?php echo $ako; ?></t></div>

       <div class = 'select'>

            <input type = 'checkbox' class = 'checkbox move'>

       </div>

   </div>

CSS

.rowcontainer {

    width: 100%;

    height: 30px;

}



.name {

    line-height: 30px;

    float: left;

    width: 60%;

    height: 100%;

    padding-left: 15px

}



.ako {

    line-height: 30px;

    text-align: center;

    float: left;

    width: 20%;

    height: 100%;

}



.select {

    line-height: 30px;

    text-align: center;

    float: right;

    width: 15%;

    height: 100%;

}



.checkbox {

    height: 17px;

    width: 17px;

    margin: auto;

    margin-top: 6px;

}

Thanks for all the answers but unfortunately I cannot seem to get this to work. When I create a new document with the code below all I get is a blank window and the following error.
Error 1 (new page)
Also when I try and add this code to my existing page I get a similar error, and nothing changes on the page.
Error 2 (existing page)
What am I missing?

<body>

    <script>

        let div = document.createElement("div");

        div.id = "div_id" ;

        div.className = "div_class";

        div.style = "background-color: red;";

        div.style.width = "100px";

        div.style.height = "100px";

        document.appendChild("div");

    </script>

</body>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gregorio

Add To Favorites

Follow

Total Points: 362

Total Questions: 95

Total Answers: 93

Location: Puerto Rico

Member since Sun, Jun 27, 2021

3 Years ago

gregorio questions

1 Vue JS @change and @keydown events in Vue 3

Fri, Apr 8, 22, 00:00, 2 Years ago

1 Angular TSLint - Cannot find builder @angular-devkit/build-angular:tslint

Sun, Nov 28, 21, 00:00, 3 Years ago

1 JS Async/Await vs Promise vs Callbacks

Sun, Sep 13, 20, 00:00, 4 Years ago

1 Axios url get reques to for html response is 200 but response.data is empty

Mon, Apr 6, 20, 00:00, 4 Years ago

1 'npm start' command doesn't do anything

Mon, Nov 25, 19, 00:00, 5 Years ago

View All

answered 3 Years ago reed · Accepted Answer

The error is caused by a bad implementation of the appendChild() method. You are passing the argument as a string: document.appendChild("div") instead of the created element .appendChild(div).

Also, you should specify to what tag you would like to append. In this case I'm using the <body> tag:

document.body.appendChild(div)

Try the following snippet:

const btn = document.getElementById(btn);



btn.addEventListener(click, () => {

  

    const div = document.createElement(div);

    

    div.id = div_id ;

    div.className = div_class;

    div.style = background-color: red;;

    div.style.width = 100px;

    div.style.height = 100px;

    document.body.appendChild(div);  

  

});

<button id=btn style=margin:10px>Create Div</button>