Question

这里是标题和正文的输入，单击带有帖子ID的按钮将输入的值添加到DOM。

<div>
  <input id="heading" placeholder="Enter post title"></input>
  <input id="paragraph" placeholder="Enter post description"></input>
<span id='postId'>0</span>
  <button id="post">Post</button>
</div>

这里是一旦单击发布按钮就会触发的功能。现在，在这些插入的元素div中获得一个编号为id递增的键。

function clicked(){
 let element = '<div id="%id%"><h1 class = "heading">%heading%</h1><p>%body%</p><br /><span id="like">0</span><button id="btn" class="like">    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button><button id="btn2" class="dislike"> <i class="fa fa-thumbs-o-down" aria-hidden="true"></i></button><br/><hr /><button id ="revertDisliked" class="disliked"><i class="fa fa-minus" aria-hidden="true"></i> like</button><button id = "revertLike" class="disliked"><i class="fa fa-minus" aria-hidden="true"></i> dislike</button></div>';

let heading = document.querySelector('#heading').value;
let body = document.querySelector('#paragraph').value;

let newElement = element.replace('%id%', id);
newElement = newElement.replace('%heading%', heading);
newElement = newElement.replace('%body%', body);
    document
        .querySelector ('#parent')
        .insertAdjacentHTML ('beforeend', newElement);
  id = id + 1
  alert(id);
document.getElementById('heading').value = '';
  document.getElementById('paragraph').value = '';
}
document.getElementById('post').addEventListener('click', clicked)

DOM中已经有一个帖子，并且它有4个事件监听器，我正在尝试将这4个事件监听器添加到添加到DOM的所有新帖子中。我知道事件委托，但是我不知道如何在这里使用。

检出codepen链接以获得更好的主意。 https://codepen.io/er-parag91/pen/WgGWaG

使用insertAdjacentHTML将eventListener添加到插入的元素中并添加到DOM

0 个答案: