将数据动态添加到 HTML 页面答案

【问题标题】：Adding data dynamically to a HTML page将数据动态添加到 HTML 页面
【发布时间】：2017-10-14 15:37:44
【问题描述】：

在使用jQuery或JavaScript的html页面中如何实现以下功能？

用户在文本区域中输入问题并按下回车按钮，那么相同的问题应该会动态显示在文本区域下方的页面中，并且用户可以输入尽可能多的问题。

当用户完成后，页面通过提交按钮提交。

您能否稍微说明一下如何做到这一点？

【问题讨论】：

你试过写这段代码了吗？

标签： javascript jquery html jquery-selectors

【解决方案1】：

试试这个开始：

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#textareabutton').click(function(){
        var q  = $('#textarea').val(),
            $p = $('<p>').html( q );
        $('#questions').append( $p );
      });
      $('#submit').click(function(){
        var tab;
        tab = $('#questions p').serializeArray();
        // now do something with $.ajax to submit the questions
        $.post("myphp.php",tab,function(resp){
          // what do I do with the server's reply ???
        });
      });
    });
  </script>
  <style type="text/css">
  </style>
</head>
<body>
  <textarea id='textarea'></textarea>
  <button type='button' id='textareabutton'>Add question</button>
  <div id='questions'></div>
  <button type='button' id='submit'>Submit questions</button>
</body>
</html>

【讨论】：

【解决方案2】：

使用 div 的 innerHTML 属性向其中添加问题。

【讨论】：