javascript - Ajouter des éléments dynamiques à la page

Question

Une question : Pourquoi l'élément p ne peut-il être inséré qu'une seule fois et ne peut ensuite pas être réinséré ?

---

Modification :
Je publierai le code

C'est du 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>

C'est 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);
}

Je ne peux mettre à jour mon commentaire qu’une seule fois, et puis ça s’arrête, je ne sais pas pourquoi ?

---

Merci : je ne savais pas que innerHTML était si magique, alors pourquoi s'embêter ?
Merci encore !

Answer 1

Le code s'exécute sans problème. Il est recommandé de vérifier le code et de le déboguer

.

Résultats des courses :

Réponse supplémentaire à la question après avoir publié le code :
Observez votre propre code. Vous utilisez oRemark.innerHTML Il n'y a aucun problème à l'exécuter lorsque vous cliquez dessus pour la première fois. Parce que le dom existe, vous pouvez exécuter cette méthode. , puis vous pouvez l'exécuter à nouveau. En apparence, le dom ajoute uniquement "insérer du texte". Parce que innerHTML est utilisé, cela équivaut à supprimer le <button class="input-submit">building</. bouton> puis dans Ajouté à la page, donc l'événement onclick précédent est perdu.
L'image ci-dessous est une solution modifiable : vous pouvez également utiliser la délégation d'événement pour la compléter

Answer 2

box doit être une boîte contenant p. Votre boîte a une valeur fixe et vous devez la mettre à jour à chaque fois

Answer 3

Parce que vous modifiez le contenu à l'intérieur <p class="remark">里面的内容的时候新添加的按钮没有添加过点击事件的。就是这个时候添加点击事件的代码没有再次执行给你添加事件，你需要把添加事件的代码放到单独一个函数里，但页面加载的时候调用一遍。然后在替换<p class="remark"> et que vous l'appelez à nouveau, afin que l'événement de clic puisse prendre effet pour tous les boutons nouvellement ajoutés.

Après tout, il s'agit toujours du principe de fonctionnement de js et dom dans le navigateur. Vous pouvez essayer de le réécrire selon ce que j'ai dit.

Je pense que le premier bouton de votre code peut être ajouté normalement, mais les autres boutons nouvellement ajoutés ne fonctionneront pas. Essayez-le.

Answer 4

https://jsfiddle.net/8ghrx7os/

Il devrait pouvoir être inséré plusieurs fois. Veuillez poster le code dans son intégralité et jeter un œil

.

--------------------Ligne de séparation----------------------------------
Parce que < button class="input-submit">Building</button> Ce bouton est un nœud enfant de <p class="remark">. <button class="input-submit">盖楼</button> 这个按钮在 <p class="remark"> 的子节点。
点击按钮时更新 <p class="remark"> 的 同时，刷新了 button，导致监听失效。

可以重新赋值解决，或者直接把 buttonLorsque vous cliquez sur le bouton, <p class="remark"> est mis à jour. En même temps, le bouton est actualisé, provoquant l'échec de la surveillance.

Vous pouvez le résoudre en réaffectant la valeur, ou simplement en plaçant le bouton à l'extérieur.

🎜Réaffecter :🎜

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

Vous pouvez essayer d'utiliser jquery.

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