jQuery 将另一个 html 标签添加到现有标签

Question

我有来自浏览器控制台的这段代码，它来自数据表插件的 Javascript（所有代码都被缩短）：

<div class="dataTables_length" id="mytable_length">
<label>
"عرض "
<select name="mytable_length" aria-controls="mytable" class="form-select form-select-sm"></select>
 "نتائج"
</label>
</div>

在这段代码下面我有这段代码（所有代码都被缩短了）：

<div id="mytable_filter" class="dataTables_filter">
<label>
"بحث: "
<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="mytable">
    </label>
    </div>

这是从浏览器控制台拍摄的图片，只是为了说明问题 https://i.stack.imgur.com/UeLz9.png

现在我需要删除父标签<div id="mytable_filter" class="dataTables_filter"> 并使用/移动带有元素label和input的子标签，并使用jQuery将它们添加到<div class="dataTables_length" id="mytable_length">/下方。所以最终的代码是：

<div class="dataTables_length" id="mytable_length">
<label>
"عرض "
<select name="mytable_length" aria-controls="mytable" class="form-select form-select-sm"></select>
 "نتائج"
</label>
<label>
"بحث: "
<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="mytable">
    </label>
</div>

使用jQuery，到目前为止我所做的是：

$(document).ready(function(){
    $('#mytable').DataTable({
        initComplete: function () {
            $('.dataTables_filter').remove();
        },
    });
});

但这只会删除<div id="mytable_filter" class="dataTables_filter"> 及其子标签，这不是我需要的。我该怎么做？

Answer 1

我需要删除父标签<div id="mytable_filter" class="dataTables_filter"> 并使用元素标签和输入获取/移动子标签并将它们添加到<div class="dataTables_length" id="mytable_length">/下方

将节点附加到给定容器是 jQuery 中的基本操作。选择节点，使用.appendTo()，完成。

$(function () {
    $('#mytable').DataTable({
        initComplete: function () {
            $('.dataTables_filter').children().appendTo('#mytable_length');
            $('.dataTables_filter').remove();
        },
    });
});

一个 DOM 节点只能有一个父节点。如果您将其附加到不同的父级，它将有效地从其当前父级中删除。