Javascript 使用数组将动态添加的li和ul元素保存到数据库

我正在尝试构建一个应用程序的用户界面，用户可以在单击“添加问题”时添加ul和li元素，我成功地开发了前端部分，这里有一个预览：

但问题是，当将数据保存到数据库时，这太让我头疼了，有没有办法将数据保存到一个数组中，这样我就可以用php显示它们，欢迎任何想法。

以下是jquery代码：

wrapper.on("click", "button", function(e){ 
        e.preventDefault();
        var parent = $(this).parent().parent().parent().parent().parent().parent();
        var parentID  = $(this).attr('element-id');
        var elementID = 1000000000000000000*Math.random();
        parentIDs.push(elementID);
        if($(this).attr('class') == "add_field_button btn btn-success"){
           if(parent.find('ul').length){
            parent.find('ul').first().append(`
            <li>
              <div class="panelcb white-box">
                    <div class="form-horizontal form-material">
                    <div class="form-group">
                  <label class="col-md-12">Question</label>
                    <div class="col-md-12">
                            <input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-12">Response</label>
                        <div class="col-md-12">
                            <input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
                    </div>
                    <div class="form-group">
                  <div class="row">
                    <div class="col-sm-4">
                        <button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
                    </div>
                    <div class="col-sm-4">
                        <button class="delete_field_button btn btn-error" >Delete</button>
                    </div>
                  </div>
                </div>
                    </div>
                  </div>
            </li>`); 
           }else{
            $(this).closest('li').append(`
            <ul><li>
              <div class="panelcb white-box">
                <div class="form-horizontal form-material">
                  <div class="form-group">
                      <label class="col-md-12">Question</label>
                      <div class="col-md-12">
                          <input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
                  </div>
                  <div class="form-group">
                      <label class="col-md-12">Response</label>
                      <div class="col-md-12">
                          <input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
                  </div>
                  <div class="form-group">
                  <div class="row">
                    <div class="col-sm-4">
                        <button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
                    </div>
                    <div class="col-sm-4">
                        <button class="delete_field_button btn btn-error" >Delete</button>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </li></ul>`); 

            }
       }else if($(this).attr('class') == "delete_field_button btn btn-error"){
        parent.remove();
       }

wrapper.on（“单击”、“按钮”），函数（e）{
e、 预防默认值（）；
var parent=$（this.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）；
var parentID=$（this.attr（'element-id'）；
var elementID=10000000000000000*Math.random（）；
parentId.push（elementID）；
if（$（this.attr（'class'）==“添加\u字段\u按钮btn btn成功”）{
if（父查找（'ul'）.length）{
find（'ul'）.first（）.append(`

问题:
回应
添加问题
删除
`）；
}否则{
$（this）.最近（'li'）。追加(`

问题:
回应
添加问题
删除
`）；
}
}else if（$（this.attr（'class'）=“删除字段\按钮btn btn错误”）{
parent.remove（）；
}

谢谢是预付款。

好吧

如果整个用户交互区域（我称之为游乐场）可以放在一个容器中：

<div id='playground'>

.. all the ul's and li's..

</div>

或者是一篇AJAX文章：

$.post( PostUrl, { playground: $('#playground').html() } );

---

另一种方法是不保存dom元素，而是保存文本，因此，当下次加载数据时，通过它检查响应循环并创建domSaving only文本值是最困难的事情，因为在每个li元素中，用户都可以使用li元素添加ul，这很难实现。确定后，将dom转换为字符串和save它

$(document).ready(function () {
    $('#form-playground').on('submit', function () {
        $('#playground-container').html($('#playground').html());
        return true;
    });
 });

$.post( PostUrl, { playground: $('#playground').html() } );