Jquery 将 div 追加到新的 div答案

【问题标题】：Jquery append div to new divJquery 将 div 追加到新的 div
【发布时间】：2013-10-29 17:27:22
【问题描述】：

我必须将 2 个 div 附加到新的 div：

<script type="text/javascript">
        $(function() {
            $( "#table-filter_wrapper" ).append($( "<div class='main_tbl_btm_info'></div>" ));
            $( "#table-filter_info" ).appendTo( $( ".main_tbl_btm_info" ));
            $( "#table-filter_paginate" ).appendTo( $( ".main_tbl_btm_info" ));
        });
</script>

问题是它找不到准备好的table-filter_wrapper。
当我在追加之前使用警报时，它会起作用。
我怎样才能知道 table-filter_wrapper 是否已加载。

【问题讨论】：

你知道什么时候 #table-filter_wrapper被注入DOM吗？
@David table-filter_wrapper 已准备好加载，这需要一些时间，因此当代码运行时，如果我们通过 alert 或其他方式给出一些延迟，则它无法找到 table-filter_wrapper 。所以实际问题是发现table-filter_wrapper在加载执行代码后是否加载。
您如何“加载”#table-filter_wrapper？在某些时候，您必须使用 append 或类似的，所以只需在附加完成后放置此代码。
@David #table-filter_wrapper 由数据表创建用于分页，它已加载就绪，我在初始化数据表后使用追加
Create <div> and append <div> dynamically 的可能重复项

标签： javascript jquery html css

【解决方案1】：

您需要像这样从您的append 中删除$：

<script type="text/javascript">
        $(function() {
            $( "#table-filter_wrapper" ).append( "<div class='main_tbl_btm_info'></div>");
            $( "#table-filter_info" ).appendTo(".main_tbl_btm_info" );
            $( "#table-filter_paginate" ).appendTo( ".main_tbl_btm_info");
        });
</script>

【讨论】：

这没有意义...appendTo 可以将 jQuery 数组作为参数，所以这不会解决任何问题。
但 div 不是操作问题中的数组。
@mamdouhalramadan 是的，脚本找不到准备好的table-filter_wrapper，这与您的解决方案无关。
@mamdouhalramadan 我认为这不是问题，$( "<div class='main_tbl_btm_info'></div>" ) 创建了一个新的 dom 元素，它会被 jQuery 接受
是的，来自 david fiddle，我看到它正在工作并且确实有意义，但这并不意味着对已经声明或从其他来源传递的元素进行此操作是正确的。

【解决方案2】：

如果元素在 DOM 中可用，则您的代码有效：http://jsfiddle.net/XY7Sf/

<div id="table-filter_wrapper"></div>
<div id="table-filter_info"></div>
<div id="table-filter_paginate"></div>

如果它们在 DOM 中不可用，您需要在何时运行此代码，也许在某个地方的 ajax 回调中？

【讨论】：

【解决方案3】：

尝试首先定位一个包装器 div 或 table，然后使用 .find() 来获取你想要的类：

var a = $(".wrapper").find(".main_tbl_btm_info")
$( "#table-filter_paginate" ).appendTo(a);

【讨论】：

【解决方案4】：

你想要这样的东西，对吧？

演示JSFIDDLE

JS：

$(function() {
            $( "#table-filter_wrapper" ).append($( "<div class='main_tbl_btm_info'>main_tbl_btm_info</div>" ));

    $( ".main_tbl_btm_info" ).append($( "<div id='table-filter_info'>table-filter_info</div>" ));

    $( ".main_tbl_btm_info" ).append($( "<div id='table-filter_paginate'>table-filter_paginate</div>" ));

});

【讨论】：