如何将用户评论内容插入template克隆的评论容器内？

你的问题出在没有在template中预留评论内容的容器，并且JS里是把评论内容直接追加到了#new-comment容器下，而非插入到克隆的评论框内部。按照下面两步修改即可：

1. 给template添加评论内容容器 #

修改HTML里的template，在.user元素后方添加一个.comment的div，和现有示例评论的结构保持一致：

<template>
  <div class="list">
    <div class="user">
      <div class="user-image"><img src="./images/Animal-Crossing-Tom-Nook-with-Money.jpg"></div>
      <div class="user-name">
        <div class="name">Tom Nook</div>
        <div class="day">1 second ago</div>
      </div>
    </div>
    <!-- 新增容器用于存放评论内容 -->
    <div class="comment"></div>
  </div>
</template>

2. 修改JS代码，将内容插入到克隆的容器内部 #

克隆template后，先找到克隆节点里的.comment元素，把用户输入的内容插入进去，再将完整的评论框添加到页面：

function postComment() {
  // 克隆评论容器模板
  var temp = document.getElementsByTagName("template")[0];
  var clone = temp.content.cloneNode(true);
  // 获取克隆节点内的评论内容容器
  var commentContainer = clone.querySelector('.comment');

  // 获取用户输入的评论内容
  var userComment = document.getElementById("comment-box").value;
  var text = document.createElement('p');
  text.innerHTML = userComment;
  // 将内容插入到克隆的评论容器内部
  commentContainer.appendChild(text);

  // 将组装好的评论框添加到页面
  var newComment = document.getElementById("new-comment");
  newComment.appendChild(clone);

  // 重置输入框
  document.getElementById("comment-box").value = "";
}

var post = document.getElementById("post");
post.addEventListener("click", function(e) {
  e.preventDefault();
  postComment()
})

问题原因说明 #

原来的代码逻辑是先把空的克隆评论框加到#new-comment，再把评论内容的p标签也追加到#new-comment，导致内容出现在评论框外部。修改后是先把内容塞进克隆的评论框内部，再将完整的评论框挂载到页面，结构和示例评论完全一致。

内容的提问来源于stack exchange，提问作者croob27