Javascript - .innerHTML changes auto close tags

Question

Я пытаюсь динамически добавлять элементы внутри других элементов, используя Javascript без обновления страницы, часть AJAX работает и работает. Однако по какой-то неизвестной причине мой код автоматически закрывается.

Вот фрагмент кода, и вы можете видеть, что он фактически не закрыт. Но после выполнения кода в браузере он закрыт

HTML

<div id="Events"> 

Javascript

Get = document.getElementById("Events"); 
Get.innerHTML = "<div class='large-6 columns Pages' id='Page" + PN + "' style='background-color: #" + i + i + i + ";'>"; 
Get.innerHTML = Get.innerHTML + "<div class='large-6 columns Pages' id='Page" + PN + "' style='display: none; background-color: #" + i + i + i + ";'>"; 

Результаты на исходный код страницы являются:

<div id="Page1" class="large-6 columns Pages" style="background-color: #000;"></div> 
<div class="EventsClass"></div> 

Как вы можете видеть , это проблема, поскольку я пытаюсь поместить элементы внутри элементов. Однако я не могу из-за закрывающих тегов.

Я ищу несколько часов и не могу найти решение или даже причину этого. Нет закрывающих тегов, но он автоматически закрывается. Есть ли способ переопределить это? Или обойти его?

Answer 1

От documentation:

В innerHTML наборов свойств или возвращает содержимое HTML (внутренний HTML) элемента.

Очевидно, что содержание возвращаемый этим свойством, должно быть хорошо сформированные HTML и, безусловно, будет оказана браузером с закрывающими тегами.

Если вы хотите использовать элементы внутри элементов и обновите HTML вашего нужного объекта GET. Просто создать нормальную строку переменной из контента, который вы хотите добавить, а затем дезинфицировать его позже, и когда у вас есть полное содержание, что вы хотите, а затем обновить .innerHTML что-то вроде:

//content is a variable that just holds the string representing the HTML Content 

    var content = "<div class='large-6 columns Pages' id='Page" + PN + "' style='background-color: #" + i + i + i + ";'>"; 
    content += "<div class='large-6 columns Pages' id='Page" + PN + "' style='display: none; background-color: #" + i + i + i + ";'>"; 

    //close the divs or add more elements to the variable content 

    Get.innerHTML = content; //At the end. 

Я надеюсь, это поможет вам начать работу в правильном направлении.