JavaScript Appending another Div data on Div Tag Dynamically

Question

I want to append the content of an already defined "old div" tag to the "new div" tag dynamically but its not working. The code i tried is attached below. And one more question, how to remove that appended div tag dynamically?

<html>
<head>
<script type="text/javascript">

function add() {

var i = document.getElementById( 'old' );
var d = document.getElementById( 'new' );
d.appendChild( i );
}
</script>

</head>
<body>
<div id="old">
Content of old div
</div>

<div id="new">
</div>
<button onclick="add()">Add</button>
</body>
</html>

It sure is a great idea.

Naeem Ul Wahhab
– Naeem Ul Wahhab

2011-11-29 20:11:52 +00:00
Commented Nov 29, 2011 at 20:11 — Naeem Ul Wahhab
– Naeem Ul Wahhab, Commented Nov 29, 2011 at 20:11

Ash Burlaczenko · Accepted Answer · 2011-11-29 20:06:22Z

9

Try this

var i = document.getElementById( 'old' );
var d = document.getElementById( 'new' );
d.innerHTML += i.innerHTML;

answered Nov 29, 2011 at 20:06

Ash Burlaczenko

25.6k16 gold badges70 silver badges103 bronze badges

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

2 Comments

Naeem Ul Wahhab Over a year ago

great.. you have made it much simple. I am voting for you. :-)

user3252538 Over a year ago

innerHTML is not a beautiful way to make it, so I recommend to use appendChild instead of it;)

Naeem Ul Wahhab · Accepted Answer · 2011-11-29 20:03:24Z

ok I solved it. There was some error in my code. Its working now.

    <html>
    <head>
        <script type="text/javascript">

            function add() {

        var i = document.getElementById( 'old' );

        var d = document.createElement( 'div' );
        d.id = "new1";
        d.innerHTML = i.innerHTML ;
        var p = document.getElementById('new');

        p.appendChild(d);

    }

    function removeLocation() {

        var d = document.getElementById( 'new1' );

        var p = document.getElementById('new');

        p.removeChild(d);

    }
        </script>

    </head>
    <body>
        <div id="old">
            Content of old div
        </div>

        <hr/>
        <div id="new">
        </div>
        <hr/>
        <button onclick="add();">Add</button><br>
        <button onclick="removeLocation();">Remove</button>
    </body>
    </html>

Collectives™ on Stack Overflow

JavaScript Appending another Div data on Div Tag Dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related