javascript - Add dynamic elements to page

Question

A question: Why can the p element be inserted only once and then cannot be inserted again?

---

Modification:
I’ll post the code

This is 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>

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

I can only update a comment once, and then it stops. I don’t know why?

---

Thanks: I didn’t know innerHTML was so magical, so why bother?
Thanks again!

Answer 1

The code runs without problems. It is recommended to check the code and debug it

Run results:

Supplementary answer to the question after posting the code:
Observe your own code. You are using oRemark.innerHTML. There is no problem with executing it when you click it for the first time. Because the dom exists, you can execute this method, and then you can execute it again. Click. On the surface, the dom only adds "insert text". Because innerHTML is used, it is equivalent to removing the <button class="input-submit">building</button> and then in Added to the page, so the previous onclick event is lost.
The picture below is a solution that can be modified: you can also use event delegation to complete it

Answer 2

box should be a box containing p. Your box has a fixed value and you need to update the box every time

Answer 3

Because you modify the content inside <p class="remark">里面的内容的时候新添加的按钮没有添加过点击事件的。就是这个时候添加点击事件的代码没有再次执行给你添加事件，你需要把添加事件的代码放到单独一个函数里，但页面加载的时候调用一遍。然后在替换<p class="remark"> and call it again, so that the click event can take effect for all newly added buttons.

After all, it’s still about the operating principle of js and dom in the browser. You can try rewriting it according to what I said.

I think the first button in your code can be added normally, but other newly added buttons will not work. Give it a try.

Answer 4

https://jsfiddle.net/8ghrx7os/

It should be able to be inserted multiple times. Please post the code in full and take a look

--------------------Separating line--------------------
Because < button class="input-submit">Building</button> This button is a child node of <p class="remark">. <button class="input-submit">盖楼</button> 这个按钮在 <p class="remark"> 的子节点。
点击按钮时更新 <p class="remark"> 的 同时，刷新了 buttonWhen the button is clicked, <p class="remark"> is updated at the same time,

is refreshed, causing the monitoring to fail.

button can be solved by reassigning the value, or simply putting

outside.

Reassign:🎜

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

You can try using jquery.

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