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 轉移到不同的父級，它將有效地從其當前父級中刪除。