javascript - 如何将一些 HTML 插入到 javascript 中

Question

我遇到的情况让我的思绪变得困惑，需要一些真正的帮助。

我正在使用以下代码从 Google 的广告管理系统 Doubleclick For Publishers (DFP) 中提取广告:

<script type='text/javascript'>
    GA_googleFillSlot("TEST_960x300");
</script>

显然，Google 会围绕所述广告自动生成一个 DIV。我正在检测广告是否存在(因此在 DIV 之上):

<script type='text/javascript'>

if(document.getElementById('google_ads_div_TEST_960x300_ad_container')){
    document.getElementById('google_ads_div_TEST_960x300_ad_container').setAttribute("class", "billboard");
}

//For IE since it seems DFP outputs a different div for IE.
if(document.getElementById('google_ads_div_TEST_960x300')){
    document.getElementById('google_ads_div_TEST_960x300').setAttribute("class", "billboard");
}

</script>

当出现广告时，我需要将以下行放在 inside 这个难以捉摸的 DIV 元素中

<input type="image" id="expand_button" src="test_btn_expand.png" />

这将在广告顶部显示一个按钮，允许用户使用该按钮缩小/展开广告。一切都像冠军一样工作，但我不知道如何在 Google 的 DIV 中获取上述按钮。

有什么想法吗？

Answer 1

有不止一种方法可以做到这一点。

首先，您可以使用 .innerHTML 编辑任何元素的内容，但请注意这是破坏性的 - 它会删除旧内容并添加新内容，即使您使用 innerHTML += ''。这在您的情况下可能很糟糕，因为如果内容包含 iframe 它可能会再次加载它，并且如果任何属性/事件已添加到容器内的任何元素，它们将被销毁。

例子:

var el = document.getElementById('google_ads_div_TEST_960x300_ad_container');
el.innerHTML += '<input type="image" id="expand_button" src="test_btn_expand.png" />';

其次，您可以附加一个新创建的元素，而不是编辑整个 innerHTML。

以下代码使用 appendChild 添加一个新元素。它不那么漂亮但没有破坏性:

var el = document.getElementById('google_ads_div_TEST_960x300_ad_container');
var input = document.createElement("input");
input.type = "image";
input.id = "expand_button";
input.src = "test_btn_expand.png";
el.appendChild(input);

JQuery可以append一个更漂亮的元素:

$('#google_ads_div_TEST_960x300_ad_container').append(
    '<input type="image" id="expand_button" src="test_btn_expand.png" />'
);