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

Question

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

<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 以及正确关闭 input 和 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/

如果您想 post 将评论添加到服务器并且只在它们保存在服务器上后将它们添加到 DOM，请查看 jQuery 的 post()（或其他类似的 AJAX 函数）。 https://api.jquery.com/jquery.post/

Answer 2

类似的东西（纯 JavaScript）：

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);

  }

};

<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>

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

How do I add elements to the DOM so people can post comments?

html

javascript

jquery

dom