使用jQuery在祖先和多个后代之间插入元素 [英] Insert element between ancestor and multiple descendants using jQuery

问题描述

我想转换

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
</div>

into

<div id="outer">
  <div id="middle">
    <div id="inner1"></div>
    <div id="inner2"></div>
  </div>
</div>

我想保留对在此之前设置的内部div的任何引用，所以只是执行 $（＃outer）。html（$（< div id ='middle>+ $（＃outer）。html（）+< / div>） ）不适合我。

I would like to preserve any references to the inner divs that may have been set prior to this so just doing $("#outer").html($("<div id='middle>" + $("#outer").html() + "</div>")) will not work for me.

有没有更好的方法，而不仅仅是创建中间的div，将外部的所有子项移动到它，然后将其附加到外部div？

Is there a better way than just creating the middle div, moving all the children of outer to it and then appending it to the outer div?

推荐答案

像这样...

$('#outer').wrapInner($('<div>',{id:'middle'}));

演示： http://jsfiddle.net/uy6wg/

.wrapInner（） 方法将包含您提供的元素中 #outer 的所有内容。

这将包括内部文本节点，如果您的实际内容包含任何。

This will include inner text nodes if your actual content contains any.

如果您关心性能，这里是一个本机DOM解决方案...

If you care about performance, here's a native DOM solution...

var outer = document.getElementById('outer'),
    middle = document.createElement('div');

middle.id = 'middle';

while(outer.firstChild)
    middle.appendChild(outer.firstChild);

outer.appendChild(middle);

演示： http://jsfiddle.net/uy6wg/1/

这可以被做成一个可重用的函数...

This could be made into a reusable function...

function wrapInner(id, tag) {
    var outer = document.getElementById(id),
        wrapper = document.createElement(tag);

    while(outer.firstChild)
        wrapper.appendChild(outer.firstChild);

    outer.appendChild(wrapper);
    return wrapper;
}

wrapInner('outer','div').id = "middle";

演示： http://jsfiddle.net/uy6wg/2/

这篇关于使用jQuery在祖先和多个后代之间插入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！