How to add and remove Div tag dynamically with javascript

Question

How would i simply remove and and add a div in realtime? and yest I already have the div made manually on the page so it will be there to be removed even the first time the function is ran. The div is called 'testElem'

I'm trying:

            var remDiv = document.getElementById('testElem');
            document.body.removeChild(remDiv);

             var divTag = document.createElement("div");
            divTag.id = "testElem";
            document.body.appendChild(divTag);

but the script isn't working. I tried placing an "alert" to test after the first remDiv. But its not even making it past there. The code breaks. In chrome i tried going to tools>Javascript console, but there are no errors. Is there a better way to debug javascript so I can see what the error is?

I'm just trying to do this so it will delete the content thats in the div every time the function is ran so the content doesn't double up. It's different every time.

Samich · Accepted Answer · 2011-09-05 07:31:03Z

7

using jQuery:

$('#testElem').remove();
$('body').append($('<div id="testElem"></div>'));

answered Sep 5, 2011 at 7:31

Samich

30.4k6 gold badges70 silver badges80 bronze badges

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

Comments

KnowledgeDude · Accepted Answer · 2011-09-05 07:37:05Z

1

An alternative solution is to make a list of all div's you need and then alternate the style property called visibility

The solution is like the following :

-----HTML------

<div id="div1" style="visibility:hidden;"  >
<div id="div2" style="visibility:hidden;"  >
<div id="div3" style="visibility:hidden;"  >
.....

-----JS--------

//to Hide
var x=document.getElementById("divToHide");
x.style.visibility="visible"; 
//to show 
ar x=document.getElementById("divToShow");
x.style.visibility="hidden";

This solution also give you a better control where the div will be placed

answered Sep 5, 2011 at 7:37

KnowledgeDude

4522 gold badges13 silver badges36 bronze badges

1 Comment

icktoofay Over a year ago

display is more often useful than visibility because setting display to none will remove the element from the flow, rather than just not rendering it.

yoavmatchulsky · Accepted Answer · 2011-09-05 07:50:59Z

0

removeChild need to be called from the parent of the div you want to remove.

so you'd want this code:

var remDiv = document.getElementById('testElem');
var parent = remDiv.parentNode;
parent.removeChild(remDiv);

var divTag = document.createElement("div");
divTag.id = "testElem";
parent.appendChild(divTag);

answered Sep 5, 2011 at 7:50

yoavmatchulsky

2,9501 gold badge18 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to add and remove Div tag dynamically with javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related