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，所以相當於把蓋樓這個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"> 的子节点。
点击按钮时更新 <p class="remark"> 的 同时，刷新了 button點擊按鈕時更新

的 同時，刷新了

，導致監聽失效。

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);
    });