Javascript - [removed] 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 unk

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.