JS создать блок ниже или выше скрипта

129

04 января 2020, 20:20

Создаю скрипт вывода баннера. Есть блок с уникальным 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>

Answer 1

<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>

Answer 2

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

#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>

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Node js отслеживание новых записей в БД mysql

Всем привет! При добавлении новой записи в бд mysql (хоть откуда, даже из phpmyadmin) мне нужно написать в consolelog('Новая запись с ID (id записи)'); как это...

102

MySQL