如何插入一些HTML到javascript

Question

我有一種情況已經讓我的思想變得麻木，可以使用一些真正的幫助。

我拉從谷歌的廣告管理系統，即DoubleClick廣告管理系統（DFP），使用此代碼：

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

顯然，谷歌會自動生成一個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" /> 

其將在廣告頂部顯示一個按鈕，允許用戶使用所述按鈕收縮/展開廣告。一切都像冠軍一樣工作，但我無法弄清楚如何在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" />' 
);