Javascript append добавляет дочерний элемент к родительскому элементу через консоль, но не отображается в элементах dev tools или на странице.

Question

Я пытаюсь добавить дочерний узел в существующий контейнер. Глядя на инструменты dev, после нажатия на кнопку я вижу, что в моем журнале консоли мой родительский контейнер (parking_container) действительно имеет добавленный div.

В разделе элементов инструментов dev контейнер для парковки не показывает добавленный div. На самой странице я не вижу добавленного div. Если я отредактирую элементы html непосредственно и добавлю div, как показано в журнале консоли, он будет отображаться, как и ожидалось.

РЕДАКТИРОВАТЬ: Контекст: я пытаюсь выполнить оперативное исправление на веб-сайте, созданном в drupal , Раздел страницы, к которому я пытаюсь добавить узел, является пользовательским модулем. Я могу добавить модуль "html", куда я вставляю код ниже. Опять же, кнопка показывает и запускает скрипт, как и ожидалось, и кажется, что append добавляет div через журнал консоли, но не отображается на странице. Я понимаю, что проблема может заключаться в том, что а) я не могу контролировать этот метод, или б) не решаем без предоставления контекста, который я не могу дать.

Просто надеюсь, что у кого-то есть идея. Спасибо.

<button onclick="addElement()">Click me</button>


<script>
function addElement (){ 
  var pContainer = document.getElementById("parking_container");

  var newDiv = document.createElement("div");
      newDiv.innerHTML="Temporary Filler";

  pContainer.appendChild(newDiv);

  console.log(pContainer);
 } 

</script>

Answer 1

попробуйте

var node = document.createTextNode("Temporary Filler");
newDiv.appendChild(node);
pContainer.appendChild(newDiv);

вместо

newDiv.innerHTML="Temporary Filler";