Question

我会尝试尽可能清楚。我有一些代码，但我不知道如何克隆注释并将新注释与用户输入的文本插入到这段代码中。

<!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网站帮助我理解了基本知识，但这仍然是一个困难的概念，我试图包围我的头脑。任何人都可以帮我弄清楚如何克隆这个用户输入的评论和文本并更新它。此外，如果有人能帮助我更好地理解它。

Answer 1

您在代码中混合使用默认的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');

}

博客评论在提交时更新

1 个答案: