html - Javascript - .innerHTML changes auto close tags

Question

I'm trying to put elements inside other elements dynamically using Javascript without refreshing the page, the AJAX part of it works and is functional. However for some unknown reason my code closes automatically.

Here is a snippet of the code, and you can see that it's no actually closed. But after running the code in a browser it is closed

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 + ";'>";

The results on the page source are:

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

As you can see, this is a problem as I am trying to put elements inside elements. However I can't due to the closing tags.

I've search for a few hours and can't find a solution or even a cause to this. There is NO closing tags, yet it is closed automatically. Is there a way to override this? Or bypass it?

Answer 1

From the documentation:

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

Clearly, the content returned by this property has to be well-formed HTML and will definitely be rendered by browser with closing tags.

If you want to use elements inside elements and update the HTML of your desired GET object. Just create a normal string variable out of the content that you want to add and then sanitize it later on, and when you have the complete content that you desire, then update the .innerHTML with something like:

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

I hope this gets you started in the right direction.