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

前端之家收集整理的这篇文章主要介绍了Javascript – .innerHTML更改自动关闭标记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用 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>

正如您所看到的,这是一个问题,因为我试图将元素放在元素中.但是我不能因为结束标签.

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

解决方法

documentation

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

显然,此属性返回的内容必须是格式良好的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.

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

原文链接:https://www.f2er.com/js/159325.html

猜你在找的JavaScript相关文章