时间戳

首页 > 解决方案 > 使用 innerHTML 是否会阻止客户端 javascript 应用于新的 html？

javascript - 使用 innerHTML 是否会阻止客户端 javascript 应用于新的 html？

问题描述

我正在使用 .innerhtml 从表单中获取信息，并重新显示以信用卡形式显示的动态数据列表。例如，请参见以下链接。https://codepen.io/quinlo/pen/ YONMEa ) 到 DOM。但是，当我将该信息显示回 DOM 时，我的客户端 Javascript 似乎并没有通过重新读取它们的 id 和 class 来应用于新元素。

相关代码片段

var renderElement = document.querySelector(".cardbox");
const html = '<div class="card-container preload" id="target" >'+
       '<div class="creditcardrender">'+
       '                            <div class="front">'+
       '                                <div id="ccsingle"></div>'+ ... etc

renderElement.innerHTML += html;

这是不可避免的 HTML/Javascript 属性还是有解决此问题的方法？

谢谢。

标签： javascripthtmluser-interfaceinnerhtmlecmascript-5

解决方案

如果我正确理解了这个问题，

usingrenderElement.innerHTML += html;等价于renderElement.innerHTML = renderElement.innerHTML + html;，这意味着它的值是由两个字符串连接产生的一个新字符串。因此，现有的 HTML 元素将被重构，就好像您从头开始分配它一样。

要添加您希望出现的 HTML 代码，您可以使用insertAdjacentHTML()函数将 HTML 代码添加到元素中，而无需修改现有代码。

renderElement.insertAdjacentHTML('beforeend', html)

推荐阅读