javascript - 向页面添加动态元素

Question

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

---

修改：
我把代码贴出来吧

这是html

<p class="remark">
    <p class="remark-input">
        <span class="input-avatar">BOSS</span>
        <textarea class="input-write"></textarea>
        <p class="input-preserve">
            <button class="input-submit">盖楼</button>
        </p>
    </p>
    <p class="remark-output">
        <p class="output-avatar"></p>
        <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>
    </p>
    <p class="remark-output">
        <p class="output-avatar"></p>
        <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>
    </p>
</p>

这是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='<p class="remark-output">'+
        '<p class="output-avatar"></p>'+
        '<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>'+
        '</p>';
    oRemark.innerHTML+=ele;
    console.log(1);
}

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

---

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

Answer 1

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

运行结果：

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

Answer 2

box应该是个包含p的盒子吧，你的box是定值，要每次更新box的

Answer 3

因为你修改<p class="remark">里面的内容的时候新添加的按钮没有添加过点击事件的。就是这个时候添加点击事件的代码没有再次执行给你添加事件，你需要把添加事件的代码放到单独一个函数里，但页面加载的时候调用一遍。然后在替换<p class="remark">里面的内容之后再调用一遍，这样才能把点击事件给新添加的所有按钮生效。

话说回来还是浏览器里面js的运行原理和dom，你根据我说的重新写试试。

我觉得你的代码里面第一个按钮能正常添加，其他新添加的按钮无效。试试看。

Answer 4

https://jsfiddle.net/8ghrx7os/

应该是可以多次插入的，楼主把代码写贴全一点看看

--------------------分割线--------------------
因为 <button class="input-submit">盖楼</button> 这个按钮在 <p class="remark"> 的子节点。 <button class="input-submit">盖楼</button> 这个按钮在 <p class="remark"> 的子节点。
点击按钮时更新 <p class="remark"> 的 同时，刷新了 button点击按钮时更新 <p class="remark"> 的 同时，刷新了

，导致监听失效。

button可以重新赋值解决，或者直接把

放在外面。

重新赋值:🎜

var oSubmit=document.querySelector('.remark .input-submit');
var oWrite=document.querySelector('.remark .input-write');
var arr=[];

var add = function() {
    var value=oWrite.value;
    var time=new Date().toLocaleString();
    var ele='<p class="remark-output">'+
        '<p class="output-avatar"></p>'+
        '<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>'+
        '</p>';
    oRemark.innerHTML+=ele;
    console.log(1);
    
    /* 重新赋值 */
    var oSubmit=document.querySelector('.remark .input-submit');
    oSubmit.onclick=add;
}

oSubmit.onclick=add;

Answer 5

你可以试下用jquery的方式试试看看。

//html
<p class="box"></p>
    <button class="btn">add</button>
//js
$(".btn").on("click", function() {
        var p = "<p>插入的文字</p>";
        $(".box").append(p);
    });