1

我会尽量说清楚。我有一些代码，但我不知道如何让它克隆评论并将新评论与用户输入的文本插入到这段代码中。

<!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="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" onclick="myFunction()">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 id="Commentinblog" 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>

我已经尝试过这个，看看我是否至少可以开始在某个地方开始它。

function myFunction()
{
// Create a new, plain <span> element
var sp1 = document.createElement("div");

// Get a reference to the element, before we want to insert the element
var sp2 = document.getElementById("Commentinblog");
// Get a reference to the parent element
var parentDiv = sp2.parentNode;

// Insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);
}

但我似乎无法完全理解这一切是如何运作的。w3schools 网站帮助我理解了基本知识，但它仍然是一个很难理解的概念。谁能帮我弄清楚如何用用户输入的评论和文本克隆它并更新它。另外，如果有人可以帮助我更好地理解它。

4

1 回答 1

0

您在代码中混合了默认的 javascript 和 jquery，这将不起作用。尝试这个：

function myFunction() {

    var $newDiv = $('<div class="panel panel-default comment"><div class="panel-heading">' + $('#comment_name').val() + '</div><div class="panel-body">' + $('#comment').val() + '</div></div>');

    // if you want the new comment on top of the old ones, use this line
    $newDiv.prependTo('#comment_list');

    // if you want the new comment below the old ones, use this line
    $newDiv.appendTo('#comment_list');

}
于 2013-09-24T15:20:17.087 回答