javascript - 在另一个先前动态创建的div中追加一个动态div

我正在尝试在另一个div中添加一个div，这两个都是动态创建的。老实说，我不确定为什么不将其添加到newDiv

(function ($){
    $.fn.dropdown = function(){

        return this.each(function(){

            //Gather information
            var id = $(this).attr("id");

            //Get the original selection and keep it as a reference
            var original = $(this);

            //Create a new div with a predefined class and taking the ID from the original HTML.
            var newDiv = $("<div id='"+id+"' class='dropDownJs' />");

            //Remove the id from the original HTML
            original.removeAttr("id");

            //Encapsulate the original dropdown with a new parent div
            original.wrap(newDiv);

            //Create children divs within the parent div for each option within the selection HTML.
            original.children().each(function(){

                //Grab crucial values from the original.
                //The value of the option
                var val = $(this).val();

                //The text from the option (label)
                var text = $(this).text();


                //Child divs to create
                var child = $("<div class='dropDownJsChild'></div>");

                newDiv.append(child);

            });

        });
    }
}(jQuery))

出于所有深入的目的，此jQuery正在处理此HTML代码段

<select id="test" class="dropdown">
    <option value="something1">Something 1</option>
    <option value="something2">Something 2</option>
    <option value="something3">Something 3</option>
</select>

为了进一步说明：

<script>
    $(document).ready(function(){
        $(".dropdown").dropdown();
    });
</script>

不幸的是，newDiv.add(child)无法正常工作，我也尝试过尝试newDiv.append(child)，但也失败了。

最佳答案

您需要使用after元素的original方法：

var child = $("<div class='dropDownJsChild' />");
original.after(child);

从newDiv的文档中可以明显看出为什么不能使用wrap附加新元素的原因：


  此结构的副本将包装在匹配元素集中的每个元素周围。


因此包装元素不再是原始元素，而是它的副本，并且不重新呈现原始节点。