adding new div element with javascript [duplicate]

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
– Mathlight, Commented Jul 4, 2014 at 9:16
please post the code of NewDiv() function. so that it will be easy to help. — Anto Subash
– Anto Subash, Commented Jul 4, 2014 at 9: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
– user3439065, Commented Jul 4, 2014 at 9: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. api.jquery.com/append — Gimby
– Gimby, Commented Jul 4, 2014 at 9:19

Elfayer · Accepted Answer · 2014-07-04 09:17:52Z

2

Use document.createElement(tagName) to do this.

DOC

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

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

answered Jul 4, 2014 at 9:17

Elfayer

4,57010 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cheruvian · Accepted Answer · 2014-07-04 09:20:11Z

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 · Accepted Answer · 2014-07-04 09:29:57Z

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/

deniskoronets · Accepted Answer · 2014-07-04 09:20:46Z

-1

you can use jquery:

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

http://jsfiddle.net/km8Wv/

answered Jul 4, 2014 at 9:20

deniskoronets

5503 silver badges17 bronze badges

Collectives™ on Stack Overflow

adding new div element with javascript [duplicate]

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related