How to get element inside div, inside another html and inside another div?

Question

In "first.html", I load a page inside div using Javascript.

<div id="content">
  <div id="lot"><a href="#" onclick="load_page()">Next</a></div>
</div>

<script>
function load_page()
{
  document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"></object>';
}
</script>

Both "first.html" and "next.html" have a div called "banner". I don't want to show "banner" in "next.html". So I add the following lines in "next.html".

<script>
document.getElementById('banner').style.display = "none";
</script>

The weird thing is the banner in "first.html" disappears but not the one in "next.html".

So one way I think to get away with it is if I could reference like this.

"first.html" --> "lot" --> "next.html" --> "banner"

Then try to make it disappear.

I also try this in "next.html", but not working.

<script>
document.getElementById('lot').getElementById('banner').style.display = "none";
</script>

Thanks for the hint.

Solution: When I use iframe, it seems to work. The banner in "next.html" is clearly recognized instead of mixing with the one in "first.html".

Answer 1

I think the simple solution is to use different ID's for the different banners. Something like
id="innerBanner" and id="outerBanner"

Iframe syntax:

<iframe src="URL" width="xxx" height="xxx"></iframe>

Answer 2

I think your problem comes from the folowing line :

document.getElementById("lot").innerHTML='<object type="text/html" data="next.html">  </object>'\

Mabye you can do the same thing with a simple hyperlink:

<a href="next.html">Next</a>

Than there is no chance, after you write the style in next.html, that it will change something in the previous page's html