jQuery add another html tag to an existing tag

Issue

I have this code from the browser console that is coming from Javascript of datatables plugin (All codes are shortened):

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

and underneath of this code I have this code (All codes are shortened):

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

This is a picture taken from the browser console just to make things clear https://i.stack.imgur.com/UeLz9.png

Now 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"> using jQuery. So the final code will be:

<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>

using jQuery, what I did so far is:

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

but this will only remove <div id="mytable_filter" class="dataTables_filter"> with its child tags, and that's not what I need. How can I do this?

Solution

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">

Appending nodes to a given container is a basic operation in jQuery. Select the nodes, use .appendTo(), done.

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

A DOM node can only have one parent. If you append it to a different parent, it will effectively be removed from its current parent.

Answered By - Tomalak