Question

使用JQUERY将此元素附加到特定DIV Class的优化方法是什么？这将生成动态元素。我使用.AppendTo然后动态显示<div class='parent-list-workorder'>内的元素。

到目前为止，这是我的代码，但它不起作用：

$(document).ready(function(){

    var ListOfWorkOrders = [];

    $("#button").click(function(){

        //var _WOID = $('.list-workorder-id').text();

        var _WOID = $('#txtWOID').val();

        //alert(_WOID);

        $.ajax({
          url:'getWorkOrders.php',
          type:'POST',
          data:{id:_WOID},
          dataType:'json',
          success:function(output){


            for (var key in output) {

                if (output.hasOwnProperty(key)) {

                    $("<div class='child-list-workorder'>

                        <div class='list-workorder'>

                            <div class='list-workorder-header'>

                                <h3 class='list-workorder-id'>" + output[key] + "</h3>

                            </div>

                            <p>" + Sample + ":" + key + "</p>

                        </div>

                    </div>").appendTo("<div class='parent-list-workorder'>");

                    //alert(output[key]);

                }
            }

            console.log(output);              

          }

        });

    });

});

我错过了什么吗？

Answer 1

您的问题出现在以下代码中：

.appendTo("<div class='parent-list-workorder'>");

appendTo()的参数也应该是有效的选择器。

你可以试试这个：

.appendTo("div.parent-list-workorder");

授予div.parent-list-workorder已存在。

Answer 2

你有两个问题。首先，您需要使用选择器作为.appendTo()的参数，而不是HTML字符串。其次，您需要删除或转义HTML字符串中的换行符。

$("<div class='child-list-workorder'>\
     <div class='list-workorder'>\
       <div class='list-workorder-header'>\
         <h3 class='list-workorder-id'>" + output[key] + "</h3>\
       </div>\
       <p>" + Sample + ":" + key + "</p>\
    </div>\
 </div>").appendTo("div.parent-list-workorder");

优化使用jquery在html中追加元素的方法

2 个答案: