Блог

У меня возникла ситуация, которая превратила мой разум в кашу, и мне не помешала бы реальная помощь.

Я загружаю объявление из системы управления рекламой Google, Doubleclick для издателей (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 Google.

Есть мысли?

Для этого существует более одного способа.

Во-первых, вы можете редактировать содержимое любого элемента с помощью .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 может добавить элемент более красивым способом:

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