Question

我有一个代码（下面是），它有一个文本框和一个评论部分。我还有一个按钮，它应该添加该评论。我不知道将在评论部分下方发表评论的代码。这是我的代码：

<div id="comments">
        <fieldset><legend>Post Your Comments!</legend>
        Name: <input type="textbox" name="name"><br><br>
    </fieldset><br>
      <textarea rows="10" cols="30" placeholder="Your Comments!"></textarea>
      <button>Add!</button>

Answer 1

我确定你想要在服务器端保存评论，但下面的代码通过向DOM添加元素来回答你的问题。您会看到代码的一些更改，包括一些ID以及正确关闭输入和br标记。

HTML：

<div id="comments">
    <fieldset>
        <legend>Post Your Comments!</legend>Name:
        <input type="textbox" id="txtName" name="name" />
        <br />
        <br />
    </fieldset>
    <br />
    <textarea id="txtComments" rows="10" cols="30" placeholder="Your Comments!"></textarea>
    <button id="btnAdd">Add!</button>
</div>
<div id="postedComments"></div>

JavaScript的：

$(document).ready(function () {
    $('#btnAdd').on('click', function (event) {
        event.preventDefault();
        // Create new HTML string containing name & comment
        var newComment = '<hr /><div class="name">' + $('#txtName').val() + '</div>' +
            '<div class="comment">' + $('#txtComments').val() + '</div>';
        // This creates a new jQuery object containing newComment 
        // and appends it to the posted comments section
        $(newComment).appendTo('#postedComments');
        // Clear input
        $('#txtComments').val('');
        $('#txtName').val('');
    });
});

演示：http://jsfiddle.net/BenjaminRay/85k8y6eo/

如果要将注释发布到服务器并且只在将它们保存到服务器后将它们添加到DOM，请查看jQuery的post（）（或其他类似的AJAX函数）。 https://api.jquery.com/jquery.post/

Answer 2

这些方面的东西（纯JavaScript中）：

＆＃13;

window.onload = function() {

  var addButton = document.getElementById("add");
  addButton.addEventListener("click", addComment);

  var theDiv = document.getElementById("comments");

  function addComment() {
    var name = document.getElementById("name").value;
    var comments = document.getElementById("post").value;
    var newPara = document.createElement("P");
    newPara.innerHTML = "<u>" + name + "</u><br/>" + comments;

    theDiv.appendChild(newPara);

  }

};

＆＃13;

<div id="comments">
  <h3>Post Your Comments!</h3>
  Name:
  <input type="textbox" name="name" id="name">
  <br/>
  <br/>
  <textarea id="post" rows="10" cols="30" placeholder="Your Comments!"></textarea>
  <br/>
  <button id="add">Add!</button>
</div>

＆＃13;

如何向DOM添加元素以便人们可以发表评论？

2 个答案: