使用纯js向div添加注释

Question

如何仅使用js（或js / jquery）向某些div元素添加注释？

例如：

我有一个表格：

<form action="#" id="create" method="post">
    <fieldset>

    <legend><strong>Add your comment</strong></legend>

    <p>
        <label for="author">Name <abbr title="Required">*</abbr></label>
        <input name="author" id="author" value=""
        required="required" aria-required="true"
        pattern="^([- wdu00c0-u024f]+)$"
        title="Your name"
        type="text" spellcheck="false" size="20" />
    </p>

    <p>
        <label for="email">Email <abbr title="Required">*</abbr></label>
        <input name="email" id="email" value=""
        required="required" aria-required="true"
        pattern="^(([-wd]+)(.[-wd]+)*@([-wd]+)(.[-wd]+)*(.([a-zA-Z]{2,5}|[d]{1,3})){1,2})$"
        title="Your email address"
        type="text" spellcheck="false" size="30" />
    </p>

    <p>
        <label for="text">Comment <abbr title="Required">*</abbr></label>
        <textarea name="text" id="text"
        required="required" aria-required="true"
        title="Your comment"
        spellcheck="true" cols="40" rows="10"></textarea>
    </p>

    </fieldset>
    <fieldset>

    <button name="preview" type="submit">Preview</button>
    <button name="save" type="submit">Submit Comment</button>

    </fieldset>

</form>

<div id="comments"></div>

之后，我尝试提交此表单，并在提交后将textarea内容添加到位于表单旁边的div元素中。 显然，不重新加载页面就无法做到。

您能帮我解决这个问题吗？

Answer 1

使用纯JS：

document.getElementById('comments').innerHTML = 'Form sent!';

使用jQuery：

$('#comments').html('Form sent!');

Answer 2

将以下javascript函数添加到页面代码

<script>
 function updateComment()
  {  
   document.getElementById("comments").innerHTML = document.getElementById("text").value;
  }
</script>

并在“提交评论”按钮的“ Onclick”事件上调用此函数

<button name="save" type="submit" onclick="updateComment()">Submit Comment</button>