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>

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

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

将在广告顶部显示一个按钮，允许用户使用所述按钮缩小/展开广告。一切都像冠军一样，但我无法弄清楚如何在谷歌的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" />'
);

如何在javascript中插入一些HTML

1 个答案: