javascript - 使用javascript向html正文添加评论和回复按钮

Question

我想将 html 元素作为无序列表添加到我的页面正文中。我已经使用 DocumentFragment 方法来创建reply buttonand的片段comment span。现在，每当用户单击回复按钮并将所有回复添加为相应评论旁边的列表时，我都需要向该 ul添加 atextbox和 a 。add reply这是我尝试过的：

function comment() {
  var my_comment = document.getElementById('comments');
  my_comment.innerHTML = "<textarea id='user_comment'> </textarea> <button onclick='addNewItem()'>Post Comment</button>";
}
function addNewItem() {
  var thediv = document.getElementById("comments_and_replies");
  var listItem = document.createElement("ul");
  var replyBox = document.createElement("textbox");
  var commentSpan = document.createElement("span");
  var user_comment = document.getElementById('user_comment');
  var replyButton = document.createElement("button");

  listItem.className = "comments-list";
  replyButton.innerText = "Reply";
  replyButton.className = "reply";
  replyButton.addEventListener("click", function() {
    var g = document.getElementById('comments_and_replies');
    for (var i = 0, len = g.children.length; i < len; i++) {

      (function(index) {
        g.children[i].onclick = function() {
          listItem.insertBefore(replyBox, listItem.children[index]);
        }
      })(i);

    }
  })

  commentSpan.textContent = user_comment.value;

  var documentFragment = document.createDocumentFragment();
  documentFragment.appendChild(listItem);
  listItem.appendChild(commentSpan);
  listItem.appendChild(replyButton);
  thediv.appendChild(documentFragment);
}

<section><button onclick="comment()">Leave a comment</button></section>
<div id="comments"></div>
<div id="comments_and_replies"></div>

Answer 1

单个事件委托<form>可以容纳无限数量的<button>s，即使它们是在页面加载后添加的。

下面的示例使用以下内容：

• 文档.forms
• .元素
• 事件.currentTarget
• 事件.目标
• 。火柴（）
• .insertAdjacentHTML()
• .previousElementSibling
• .parentElement
• 。消除（）

注意：除非您将数据提交到服务器，否则请添加type="button"到每个<button>

详细信息在下面的代码中注释

// Refernce <form>
const form = document.forms.commentsReplies;
// Any click on <form> invokes post()
form.onclick = post;

// Pass the event
function post(event) {
  /* Reference all <fieldset>
  (also <button>, <textarea>, etc) */
  const field = event.currentTarget.elements;
  // Reference the actual element clicked
  const clicked = event.target;
  // if element clicked has class postCom
  if (clicked.matches('.postCom')) {
    /* find <fieldset name="post"> and
    insert HTML into it */
    field.post.insertAdjacentHTML('beforeEnd', `<fieldset name='commentPost'><textarea></textarea><button class='comTxt' type='button'>Done</button></fieldset>`);
    // Otherwise if clicked element has class comTxt
  } else if (clicked.matches('.comTxt')) {
    /* find the clicked element's element
    that is right before it and get it's text */
    const text = clicked.previousElementSibling.value;
    /* find <fieldset name='comments'> and insert HTML */
    field.comments.insertAdjacentHTML('afterBegin', `<fieldset>${text}<button class='postRep' type='button'>Reply</button><ul></ul></fieldset>`);
    // Remove <fieldset name='commentPost'>
    field.commentPost.remove();
  } else if (clicked.matches('.postRep')) {
    clicked.insertAdjacentHTML('afterEnd', `<ul><textarea></textarea><button class='repTxt' type='button'>Done</button></ul>`);
  } else if (clicked.matches('.repTxt')) {
    const text = clicked.previousElementSibling.value;
    const list = clicked.parentElement;
    list.insertAdjacentHTML('afterBegin', `<li>${text}<button class='postRep' type='button'>Reply</button></li>`);
    clicked.previousElementSibling.remove();
    clicked.remove();
  } else {
    return false;
  }
}

button {
  display: block;
  margin-left: 25%;
}

<form id='commentsReplies'>
  <fieldset name='post'><button class='postCom' type='button'>Leave a comment</button>
  </fieldset>
  <fieldset name="comments">
    <legend>Comments</legend>
  </fieldset>
</form>