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并将它们添加到/下方<div class="dataTables_length" id="mytable_length">使用 jQuery。 所以最终的代码将是：

<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">并获取/移动带有元素 label 的子标签，然后输入并将它们添加到/下方<div class="dataTables_length" id="mytable_length">

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

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

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