如何在div，另一个html和另一个div中获取元素？

Question

在“ first.html”中，我使用Java脚本在div内加载了一个页面。

<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>

“ first.html”和“ next.html”都有一个名为“ banner”的div。 我不想在“ next.html”中显示“横幅”。 所以我在“ next.html”中添加了以下几行。

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

奇怪的是，“ first.html”中的横幅消失了，但“ next.html”中的横幅没有消失。

因此，我认为摆脱这种情况的一种方法是，我是否可以像这样引用。

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

然后尝试使其消失。

我也尝试在“ next.html”中进行此操作，但是不起作用。

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

感谢您的提示。

解决方案：使用iframe时，它似乎可以工作。 可以清楚地识别“ next.html”中的横幅，而不是与“ first.html”中的横幅混合。

Answer 1

我认为简单的解决方案是对不同的横幅使用不同的ID。 就像是
id =“ innerBanner”和id =“ outerBanner”

iframe语法：

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

Answer 2

我认为您的问题来自以下方面：

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

Mabye您可以使用简单的超链接执行相同的操作：

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

在next.html中编写样式之后，没有任何可能改变上一页html中的内容。