[英]jQuery add another html tag to an existing tag
I have this code from the browser console that is coming from Javascript of datatables plugin (All codes are shortened):我有来自浏览器控制台的代码,该代码来自数据表插件的 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>
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这是从浏览器控制台拍摄的图片,只是为了让事情清楚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.现在我需要删除父标签<div id="mytable_filter" class="dataTables_filter">
并使用元素label
获取/移动子标签,然后input
并将它们添加到/下方<div class="dataTables_length" id="mytable_length">
使用 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:使用 jQuery,到目前为止我所做的是:
$(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.但这只会删除<div id="mytable_filter" class="dataTables_filter">
及其子标签,这不是我需要的。 How can I do this?我怎样才能做到这一点?
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">
我需要删除父标签<div id="mytable_filter" class="dataTables_filter">
并获取/移动带有元素 label 的子标签,然后输入并将它们添加到/下方<div class="dataTables_length" id="mytable_length">
Appending nodes to a given container is a basic operation in jQuery.将节点附加到给定容器是 jQuery 中的基本操作。 Select the nodes, use .appendTo()
, done. Select 节点,使用.appendTo()
,完成。
$(function () {
$('#mytable').DataTable({
initComplete: function () {
$('.dataTables_filter').children().appendTo('#mytable_length');
$('.dataTables_filter').remove();
},
});
});
A DOM node can only have one parent.一个 DOM 节点只能有一个父节点。 If you append it to a different parent, it will effectively be removed from its current parent.如果您将 append 转移到不同的父级,它将有效地从其当前父级中删除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.