adding new div element with javascript

Question

How can I add the same element (with the same id) by clicking a button that has javascript attached on onclick() (I have no JS at the moment)? I thought about using document.write and then just add a div, but didn't work out for me + I've heard it's a bad practice.

So far what I have:

HTML:

<!DOCTYPE html/>
<html>
    <head>
        <title>wat</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="CssHtmlLapai.css">
        <script src="JsLapai.js"></script>
    </head>
    <body>
        <button type="button" onclick="NewDiv()">Click me</button>
        <div id="first"></div>
    </body>
</html>

CSS:

#first{
    width: 100px;
    height: 100px;
    background-color: red;
}

Having the same `ID` multiple times is indeed bad practice. An ID is used as an `unique identifier`. If you want an general identifier, You can use an `class` — Mathlight, Jul 04 '14 at 09:16
please post the code of `NewDiv()` function. so that it will be easy to help. — Anto Subash, Jul 04 '14 at 09:17
could you be more specific please? Where should the div be added? Directly after the button? Also, do not use the same ID multiple times, it is not good practice. Use class instead. — user3439065, Jul 04 '14 at 09:17
using document.write is not a bad practice, in this case it is entirely wrong. You don't want to write new content, you want to -append- content to existing content. Consider using JQuery which makes DOM manipulation incredibly easy. http://api.jquery.com/append/ — Gimby, Jul 04 '14 at 09:19
Maybe you should read about dom manipulation with javascript (and jquery to make it easier) then try something, and then if you can't figure it out, ask a question here. -1 — Michiel, Jul 04 '14 at 09:20

score 2 · Answer 1 · answered Jul 04 '14 at 09:17

2

Use document.createElement(tagName) to do this.

DOC

function NewDiv() {
   var newDiv = document.createElement("div");

   document.getElementById("parentDivId").appendChild(newDiv);
}

answered Jul 04 '14 at 09:17

Elfayer

4,411
9
46
76

score 1 · Answer 2 · answered Jul 04 '14 at 09:20

I think what you're looking for is applying the same CSS across multiple elements. To do this you should use a class rather than a duplicate ID. (IDs are inherently used as identifiers and javasript will do surprising things if you try to have multiple).

So instead of 'id' use 'class'

<!DOCTYPE html/>
<html>
    <head>
        <title>wat</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="CssHtmlLapai.css">
        <script src="JsLapai.js"></script>
    </head>
    <body>
        <button type="button" onclick="NewDiv()">Click me</button>
        <div class="first"></div>
    </body>
</html>

To define a class you will use the '.' prefix

.first{
    width: 100px;
    height: 100px;
    background-color: red;
}

And then in JS you could do something like...

<script>
    function NewDiv()
    {
        var newDiv = document.createElement("div");
        newDiv.className = "first";
        newDiv.id = "someotherid"; //not neccessary but probably useful
    }
</script>

Vinod Dalvi · Answer 3 · 2014-07-04T09:29:57.477

Use the following Code:

HTML:

<!DOCTYPE html/>
<html>
    <head>
        <title>wat</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="CssHtmlLapai.css">
        <script src="JsLapai.js"></script>
    </head>
       <body>
            <button type="button" id="click-me">Click me</button>
            <div id="first" class="common-css"></div>
        </body>
</html>

CSS:

.common-css{
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript:

document.getElementById('click-me').onclick = function() {
   var newdiv = document.createElement('div');
   var firstdiv = document.getElementById('first');
   newdiv.setAttribute('class', 'common-css');
   firstdiv.appendChild(newdiv);
};

JSFiddle link: http://jsfiddle.net/vinoddalvi/u4H9h/

score -1 · Answer 4 · answered Jul 04 '14 at 09:20

-1

you can use jquery:

$('button').click(function() {
    $('#first').first().clone().appendTo('body');
});

http://jsfiddle.net/km8Wv/

answered Jul 04 '14 at 09:20

deniskoronets

520
3
15

adding new div element with javascript

4 Answers4