如何在页面中插入评论答案

【问题标题】：How to insert comments in page如何在页面中插入评论
【发布时间】：2013-09-23 09:46:11
【问题描述】：

我想看看是否有人可以帮助我解决这个问题。我想看看如何在我的页面中插入评论并在现场进行更新，但问题是，我不知道该怎么做。我试图看起来像这样的网站，我不知道如何让它正常工作，因为即使查看源代码，它似乎也没有帮助。这是我目前所拥有的。

<!DOCTYPE html>
<!-- 
this is a comment, the above indicates the formal document type 
(like what a file extension does, but as part of the document)
-->
<html>

<head>
  <!-- the head section is things that aren't visible on the page, like the title -->
  <title>Da Blog</title>

  <!-- we'll put lots more in here later -->

  <link rel="stylesheet" type="text/css" href="jquery.css" />
  <script src="http://code.jquery.com/jquery.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>

<body>
  <!-- the body is where the visible stuff goes -->

  <br/><br/><br/>
  <hr>
  <h1>My Uber Fake Blog</h1>
  <hr>

  <p>
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
</p>


<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Add a comment</h3>
    </div>
    <div class="panel-body">
        <form id="comment_form">
        <div class="form-group">
            <input type="textbox" id="comment_name" placeholder="Name"
             class="input-large form-control"/>
        </div>
        <div class="form-group">
            <textarea rows="4" cols="60" id="comment" placeholder="Comment"
             class="form-control"></textarea>
        </div>
        <div class="form-group">
            <button id="post" class="btn">Post</button>
        </div>
        </form>
    </div>
</div>

<div id="comment_list">
    <div class="panel panel-default comment">
        <div class="panel-heading">etomai</div>
        <div class="panel-body">
            This is my comment.  I think the post is too long.
        </div>
    </div>

    <div class="panel panel-default comment">
        <div class="panel-heading">etomai</div>
        <div class="panel-body">
            This is my comment.  I think the post is too long.
        </div>
    </div>
</div>

</div>
</div>


</body>

</html>

【问题讨论】：

使用 JavaScript？这样做有什么意义？
我也对用例很好奇。当然，查看 DOM 的人也可以访问控制台消息。为什么不直接使用console.log()？
我已经开始认为您可能还不清楚 comment 的意思；在谈论 JavaScript 时，// this 和 /* this */ 是注释，而在谈论 HTML/DOM 时， 是注释。但是，我开始认为您的意思只是普通的 HTMLElements。阅读 document.createElement、node.appendChild、node.insertBefore、node.cloneNode 和 document.getElementById 的 MDN 参考资料以了解这一点。

标签： javascript jquery html css

【解决方案1】：

类似于将 HTMLElement 添加到 DOM 树，Comment 也是一个 Node (nodeType 8) 并且将以相同的方式工作。使用document.createComment新建一个，你可以修改data属性来改变它的内容。

【讨论】：

我喜欢这个想法，但问题是，我不太确定如何实现它。我会假设它也将它放在页面的底部。有没有办法让它把它放在评论堆栈的顶部？
评论栈？它会放置在您附加/插入它的任何位置。