Geek Answers Handbook

Javascript -.innerHTML modifies auto close tags

I am trying to add elements inside other elements dynamically using Javascript without refreshing the page, part of AJAX works and works. However, for some unknown reason, my code automatically closes.

Here is a snippet of code, and you can see that it is not actually closed. But after running the code in the 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 + ";'>";

Results per page:

<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 try to put elements inside elements. However, I cannot because of closing tags.

I am looking for several hours and can not find a solution or even the reason for this. There are no closing tags, but they automatically close. Is there a way to override this? Or go around it?

+4
1

:

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.

, .

+10

More articles:


All Articles