javascript - 向页面添加动态元素

问题描述

问 题

请教一个问题：为什么p元素只能插入一次，之后就无法再插入？

---

修改：
我把代码贴出来吧

这是html

<div class="remark">
    <div class="remark-input">
        <span class="input-avatar">BOSS</span>
        <textarea class="input-write"></textarea>
        <div class="input-preserve">
            <button class="input-submit">盖楼</button>
        </div>
    </div>
    <div class="remark-output">
        <div class="output-avatar"></div>
        <p class="output-info">
            <span class="output-name">lily:&nbsp;</span>
            <span class="output-message">haha</span>
        </p>
        <p class="output-time">今天&nbsp;04:32:56<span>回复|赞</span></p>
    </div>
    <div class="remark-output">
        <div class="output-avatar"></div>
        <p class="output-info">
            <span class="output-name">lucy:&nbsp;</span>
            <span class="output-message">haha</span>
        </p>
        <p class="output-time">今天&nbsp;04:32:57<span>回复|赞</span></p>
    </div>
</div>

这是js

var oRemark=document.querySelector('.remark');
var oSubmit=document.querySelector('.remark .input-submit');
var oWrite=document.querySelector('.remark .input-write');
var arr=[];
            
oSubmit.onclick=function(){
    var value=oWrite.value;
    var time=new Date().toLocaleString();
    var ele='<div class="remark-output">'+
        '<div class="output-avatar"></div>'+
        '<p class="output-info">'+
        '<span class="output-name">BOSS:&nbsp;</span>'+
        '<span class="output-message">'+value+'</span>'+
        '</p>'+
        '<p class="output-time">'+time+'<span>回复|赞</span></p>'+
        '</div>';
    oRemark.innerHTML+=ele;
    console.log(1);
}

只能更新一次评论，然后就嗝屁了，不知道为啥？

---

感谢：不知道innerHTML这么神奇，何苦呢？
再次感谢！

解决方案

代码运行没有问题，建议检查下代码，debug一下

运行结果：

补充回答贴代码之后的问题：
观察一下你自己的代码，你用的是oRemark.innerHTML,第一次点击执行是没有问题的，因为dom是存在的，所以可以执行这个方法，然后你再次点击，表面上dom只是新增了插入文字，因为使用的是innerHTML，所以相当于把<button class="input-submit">盖楼</button>这个dom移除了然后在添加到页面上，所以就失去了之前的onclick事件。
下图是可以修改的一种方案：你也可以使用事件委托去完成

这篇关于javascript - 向页面添加动态元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！