1

Создаю скрипт вывода баннера. Есть блок с уникальным ID в него выводится баннер. Как сделать, чтобы если блок не существует создать его в том же месте где выводится скрипт? document.write не помогает, так как скрипт проверяет наличие блока после загрузки DOM.

Сейчас реализовал так. Хоть и работает это, но мне кажется сделал коряво (=

<script>
var div=document.getElementById("My_ID");
if(!div){document.write('<div id="My_ID"></div>');}

document.addEventListener("DOMContentLoaded", function(){
div=document.getElementById("My_ID");
//Здесь делаю действия с блоком
div.innerHTML='Вставляем баннер';
});
</script>

6
  • Это не только "коряво", но и неправильно. Вам же показали, как надо.
    – user176262
    Commented 3 апр. 2019 в 22:09
  • Как показали не работает правильно. ИД присваивать скрипту нежелательно. Да и все варианты не выводили блок в нужном месте - т.е. сразу ниже или выше скрипта. Возможно, это связано с тем, что таких скриптов может быть несколько на странице.
    – wmshop
    Commented 3 апр. 2019 в 22:19
  • Вы неаккуратно скопировали к себе код из второго фрагмента в моем ответе.
    – user176262
    Commented 3 апр. 2019 в 22:22
  • Еще раз попробовал. Работает неправильно. Если один вызов скрипта - все работает. А если несколько - все баннеры лепятся в одну кучу у последнего скрипта. А должно быть каждый на своем месте.
    – wmshop
    Commented 3 апр. 2019 в 22:39
  • Все верно. Извиняюсь. Ошибку сделал, что при копировании не включал что выполнение внутри функции. Действительно все работает. Попутно можете объяснить разницу? Я использовал document.addEventListener("DOMContentLoaded", function(){... а вы window.addEventListener("load", function() {... В чем разница?
    – wmshop
    Commented 3 апр. 2019 в 22:47

2 ответа 2

0

<div>before</div>
<script id="myScript">
  window.addEventListener("load", function() {
    console.log("loaded");
    var div = document.getElementById("Мой_ID");
    if (!div) {
      var div = document.createElement("div");
      div.id = "Мой_ID";
      div.textContent = "dynamic";
      // Вставляем сразу ниже или выше этого скрипта
      var thisScript = document.getElementById("myScript");
      thisScript.parentNode.insertBefore(div, thisScript);
    }
  });
  console.log("loading");
</script>
<div>after</div>

Можно обойтись без id в тэге скрипта:

<div>before</div>
<script>
(function() {
  var scripts = document.querySelectorAll("script");
  var thisScript = scripts[scripts.length - 1];
  window.addEventListener("load", function() {
    console.log("loaded");
    var div = document.getElementById("Мой_ID");
    if (!div) {
      var div = document.createElement("div");
      div.id = "Мой_ID";
      div.textContent = "dynamic";
      // Вставляем сразу ниже или выше этого скрипта
      thisScript.parentNode.insertBefore(div, thisScript);
    }
  });
  console.log("loading");
})();
</script>
<div>after</div>

<div>before1</div>
<script>
(function() {
  var scripts = document.querySelectorAll("script");
  var thisScript = scripts[scripts.length - 1];
  window.addEventListener("load", function() {
    console.log("loaded1");
    var div = document.getElementById("Мой_ID1");
    if (!div) {
      var div = document.createElement("div");
      div.id = "Мой_ID1";
      div.textContent = "dynamic1";
      // Вставляем сразу ниже или выше этого скрипта
      thisScript.parentNode.insertBefore(div, thisScript);
    }
  });
  console.log("loading1");
})();
</script>
<div>after1</div>

0

Если я верно Вас понял, то Вот так:

#ddd{
  border:solid
}
<script>
var div=document.getElementById("ddd");
if(!div){
  var div=document.createElement("div");
  div.id="ddd";
  document.body.append(div)
}
</script>

<script>
var div=document.getElementById("ddd");
if(!div){
  var div=document.createElement("div");
  div.id="ddd";
  document.body.append(div)
}
</script>

Вот результат:

введите сюда описание изображения

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.