How to reuse div tag to display different information everytime in javascript?

html code:
<html>
<body>
<div id="container">
</body>
</html>

Open in new window


js code:
function call_me()
{
 container=document.getElementById('container');

//do something

}

Open in new window


I am calling this function on onclick listener. But everytime when I call this js function, new div tag is added to page.
The problem  : I want to hide earlier div and display only new div.
How to resolve this ?
Pradip ShenolkarAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
First thing: You're missing the closing tag of the div. Should be:
<div id="container"></div>

Open in new window

After this, I don't see what you're adding a new div anywhere in your code.
Is this all you are executing?
Duy PhamFreelance IT ConsultantCommented:
You can't create new div with the same id ("container") as the existing one. If you still want to keep the old data hidden when new data is coming, then you'd better put data into child div of your "container" div, and hide old child divs when data is coming. E.g:

$('#container > div[class="child-div"]').hide();
$('#container').append('<div class="child-div">Your data in HTML here</div>");

Open in new window

Rainer JeschorCommented:
Hi,
@Duy Pham: sorry, but there is no jQuery topic assigned nor any jQuery usage mentioned - therefore a good plain Javascript question and it might complicate things to introduce jQuery into this question and even if your code sample  could solve the issue, it is not on the right track.

KR
Rainer
Duy PhamFreelance IT ConsultantCommented:
Hi Rainer,

Sorry that I didn't notice it. Thanks for reminding me.

@Pradip:  Here is a plain javascript code that could achieve the same result:

var container = document.getElementById("container");
		
// hide old divs
var oldDivs = container.getElementsByClassName("child-div");
if (oldDivs) {
	for (var i = 0; i < oldDivs.length; i++) {
		oldDivs[i].style.display = "none";
	}
}
		
// new data
var newDiv = document.createElement('div');
newDiv.className = "child-div";
newDiv.innerHTML = 'Your HTML content here';
container.appendChild(newDiv);

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Pradip ShenolkarAuthor Commented:
Thanks alot.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.