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

Posted 2023-05-07

【中文标题】Javascript - .innerHTML 更改自动关闭标签

【英文标题】：Javascript - .innerHTML changes auto close tags

【发布时间】：2018-06-02 02:52:42

【问题描述】：

我试图在不刷新页面的情况下使用 javascript 动态地将元素放入其他元素中，它的 AJAX 部分可以工作并且可以正常工作。但是由于某些未知原因，我的代码会自动关闭。

这是代码的 sn-p，您可以看到它实际上并没有关闭。但是在浏览器中运行代码后它会关闭

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>

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

我已经搜索了几个小时，但找不到解决方案，甚至找不到原因。 没有结束标签，但它会自动关闭。有没有办法覆盖这个？还是绕过它？

【问题讨论】：

你能在 jsfiddle 中发布你的代码吗？为什么你的变量命名为get？ Get 和 Post 通常用于表示 Http 方法

【参考方案1】：

来自documentation：

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.

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

【讨论】：

工作就像一个魅力。没有意识到您不能插入损坏的 HTML。以后会记住的。谢谢维韦克！