如何解决如何在javascript中单击操作后为DOM中的新添加的元素编写回调?
我有一个向DOM添加新元素的按钮。现在,我要编写事件列表器,以单击该新元素。但是不能这样做,因为在页面加载时,此元素将不在DOM中。到目前为止,我尝试过的代码是
const initButton = document.querySelector(".wS .amr .amn .ams");
initButton.click() // this will add new element in DOM which will be async action
// now I want to perform following on newly added element
document.querySelector(".fX.aXjCH").setAttribute("style","display:block");
document.querySelector(".aB.gQ.pE").click();
我需要一些回调机制,以便在DOM用新组件更新后可以执行更高版本的代码。我该如何实现?如何确保DOM已更新?还是有什么办法可以为第一个click()编写回调?
解决方法
- 在结束正文标签之前放置脚本标签
- 像这样添加
readystatechange
事件- - 追加后,您可以访问新添加的标记。
注意:如果标记来自数据库,这种在.innerHTML
中使用的附加子项是不安全的,除非我们对str
进行了清理,否则它可能导致XSS。
<body>
<ul id="ul_o">
<button class='wS amr amn ams'>WS </button>
<div class='container'>
</div>
</ul>
<script type='text/javascript'>
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
const initButton = document.querySelector(".wS.amr.amn.ams");
const container = document.querySelector(".container");
initButton.addEventListener('click',function(){
var str = '<p>something here</p>';
var temp = document.createElement('div');
temp.innerHTML = str;
container.appendChild(temp);
const span = document.querySelector("p");
console.log(span);
});
}
}
</script>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。