javascript - Tambah elemen dinamik pada halaman

Question

Persoalan: Mengapa elemen p boleh dimasukkan sekali sahaja dan kemudian tidak boleh dimasukkan semula?

---

Pengubahsuaian:
Saya akan siarkan kod

Ini 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>

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

Saya hanya boleh mengemas kini ulasan saya sekali, dan kemudian ia berhenti saya tidak tahu mengapa?

---

Terima kasih: Saya tidak tahu innerHTML sangat ajaib, jadi mengapa perlu bersusah payah?
Terima kasih sekali lagi!

Answer 1

Tiada masalah dengan kod berjalan Adalah disyorkan untuk menyemak kod dan nyahpepijatnya

.

Hasil lari:

Jawapan tambahan kepada soalan selepas menyiarkan kod:
Perhatikan kod anda sendiri Anda menggunakan oRemark.innerHTML Tiada masalah untuk melaksanakannya apabila anda mengkliknya buat kali pertama, kerana dom itu wujud , jadi ia boleh dilaksanakan kaedah ini, dan kemudian anda klik sekali lagi, pada permukaan, dom hanya menambah "insert text". submit"></button> Dom telah dialih keluar dan kemudian ditambahkan pada halaman, jadi acara onclick sebelumnya telah hilang.
Gambar di bawah ialah penyelesaian yang boleh diubah suai: anda juga boleh menggunakan delegasi acara untuk melengkapkan

Answer 2

Kotak hendaklah kotak yang mengandungi p. Kotak anda mempunyai nilai tetap Anda perlu mengemas kini kotak setiap kali

.

Answer 3

Kerana anda mengubah suai kandungan di dalam <p class="remark">里面的内容的时候新添加的按钮没有添加过点击事件的。就是这个时候添加点击事件的代码没有再次执行给你添加事件，你需要把添加事件的代码放到单独一个函数里，但页面加载的时候调用一遍。然后在替换<p class="remark"> dan memanggilnya semula, supaya acara klik boleh berkuat kuasa untuk semua butang yang baru ditambah.

Lagipun, ia masih mengenai prinsip operasi js dan dom dalam penyemak imbas Anda boleh cuba menulis semula mengikut apa yang saya katakan.

Saya rasa butang pertama dalam kod anda boleh ditambah seperti biasa, tetapi butang lain yang baru ditambah tidak akan berfungsi. Cubalah.

Answer 4

https://jsfiddle.net/8ghrx7os/

Ia sepatutnya boleh dimasukkan beberapa kali Sila siarkan kod sepenuhnya dan lihat

--------------------Barisan pemisah---------------------
Kerana < button class="input-submit">Building</button> Butang ini ialah nod anak <p class="remark">. <button class="input-submit">盖楼</button> 这个按钮在 <p class="remark"> 的子节点。
点击按钮时更新 <p class="remark"> 的 同时，刷新了 button，导致监听失效。

可以重新赋值解决，或者直接把 buttonApabila butang diklik, <p class="remark"> dikemas kini Pada masa yang sama, butang dimuat semula, menyebabkan pemantauan gagal.

Anda boleh menyelesaikannya dengan menetapkan semula nilai atau letak sahaja butang di luar.

🎜Tugas semula:🎜

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

Anda boleh cuba menggunakan jquery.

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