Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
172 views
in Technique[技术] by (71.8m points)

javascript - How to insert comments in page

I wanted to see if anyone could help me with this. I wanted to see how to insert a comment into my page and have it update on the spot but the problem is, I am not sure how to do it. I have tried to look like sites like this one I don't know how to get it to work correctly since even with looking at the source, it doesn't really seem to help. This is what I have so far.

<!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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Similar to adding a HTMLElement to the DOM Tree, a Comment is also a Node (nodeType 8) and will work in the same way. Use document.createComment to make a new one, and you can modify the data property to change it's contents.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...