javascript - 為頁面新增動態元素

Question

請教一個問題：為什麼p元素只能插入一次，之後就無法再插入？修改：我把程式碼貼出來吧 這是html {程式碼...} 這是js {程式碼...} 只能更新一次評論，然後就嗝屁了，不知道為啥？感謝：不知道innerHTML這麼神奇，何苦...

仅有的幸福 · Answer

程式碼運作沒問題，建議檢查下程式碼，debug一下

運行結果：

補充回答貼程式碼之後的問題：
觀察一下你自己的程式碼，你用的是oRemark.innerHTML,第一次點擊執行是沒有問題的，因為dom是存在的，所以可以執行這個方法，然後你再次點擊，表面上dom只是新增了“插入文字”，因為使用的是innerHTML，所以相當於把這個dom移除了然後在添加到頁面上，所以就失去了之前的onclick事件。
下圖是可以修改的一種方案：你也可以使用事件委託去完成

巴扎黑 · Answer

box應該是個包含p的盒子吧，你的box是定值，要每次更新box的

漂亮男人 · Answer

因為你修改

里面的内容的时候新添加的按钮没有添加过点击事件的。就是这个时候添加点击事件的代码没有再次执行给你添加事件，你需要把添加事件的代码放到单独一个函数里，但页面加载的时候调用一遍。然后在替换

裡面的內容之後再調用一遍，這樣才能把點擊事件給新添加的所有按鈕生效。

話說回來還是瀏覽器裡面js的運作原理和dom，你根據我說的重新寫試試。

我覺得你的程式碼裡面第一個按鈕可以正常加，其他新加入的按鈕無效。試試看。

PHP中文网 · Answer

https://jsfiddle.net/8ghrx7os/

應該是可以插入多次的，樓主把代碼寫貼全一點看看

--------------------分割線--------------------
因為這個按鈕在

的子節點。这个按钮在

的子节点。
点击按钮时更新

的同时，刷新了 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=''+
        '
'+
        ''+
        'BOSS: '+
        ''+value+''+
        ''+
        ''+time+'回复|赞'+
        '';
    oRemark.innerHTML+=ele;
    console.log(1);
    
    /* 重新赋值 */
    var oSubmit=document.querySelector('.remark .input-submit');
    oSubmit.onclick=add;
}

oSubmit.onclick=add;

为情所困 · Answer

你可以試試看用jquery的方式試試看。

//html

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