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"> 和 take/move 带有元素 label 和 input 的子标签，并使用 jQuery 添加它们 to/underneath <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

I need to remove the parent tag <div id="mytable_filter" class="dataTables_filter"> and take/move the child tags with elements label and input and add them to/underneath <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节点只能有一个父节点。如果您将它附加到不同的父级，它将有效地从其当前父级中删除。

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

jQuery add another html tag to an existing tag

html

javascript

jquery

frontend