Javascript-.innerHTML更改自动关闭标记

Javascript - .innerHTML changes auto close tags

本文关键字：innerHTML Javascript-      更新时间：2023-09-26

我试图在不刷新页面的情况下，使用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>

正如您所看到的，这是一个问题，因为我试图将元素放入元素中。但是，由于结束标记，我不能。

我已经搜索了几个小时，但找不到解决方案，甚至找不到原因。没有关闭标记，但它是自动关闭的。有没有办法推翻这一点？或者绕过它？

来自文档：

innerHTML属性设置或返回元素的HTML内容（内部HTML）。

显然，此属性返回的内容必须是格式良好的HTML，并且肯定会由带有关闭标记的浏览器呈现。

如果要使用元素内部的元素并更新所需GET对象的HTML。只需从您想要添加的内容中创建一个普通的字符串变量，然后稍后对其进行清理，当您拥有所需的完整内容时，使用以下内容更新.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.

我希望这能让你朝着正确的方向开始。

相关文章：