javascriptにHTMLを挿入する方法

Question

私は心が曇り、本当の助けになるかもしれない状況があります。

私は、Googleの広告管理システムからの広告に引っ張っDoubleClick for Publishersは（DFP）、このコードを使用しています：

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

どうやら、GoogleのDIVを自動生成には、周りに広告を述べました。広告が存在する場合、このとらえどころのないDIV要素は

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

た私は内で次の行を配置する必要があり

<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の上）に存在する場合、私はこれを検出しています広告の上にボタンを表示して、ユーザが前記ボタンを用いて広告を縮小/拡大することを可能にする。すべてがチャンピオンのように働いていますが、私は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" />' 
);