使用jQuery在祖先和后代之间插入元素

Insert element between ancestor and descendant using jQuery

本文关键字：之间 插入 元素 后代 jQuery 祖先 使用      更新时间：2023-09-26

我想转换

<div id="outer">
  <div id="inner"></div>
</div>

进入

<div id="outer">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>

我想保留在此之前设置的对div的任何引用，所以只做$（"#outer"）.html（$（"+$（"#outer"？

使用.wrap()。。。

$('#inner').wrap('<div id="middle"></div>');

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

您应该注意的是，尽管jQuery让它看起来像是在使用HTML，因为它接受像'<div id="middle"></div>'这样的字符串来创建元素，但事实是，它接受您的字符串，使用它来创建DOM元素，然后将它插入到DOM中，将它和包装的部分放在各自的位置。

它在DOM API中与此类似。。。

var inner = document.getElementById('inner');
var middle = document.createElement('div');
middle.id = 'middle';
inner.parentNode.insertBefore(middle, inner);
middle.appendChild(inner);

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

jQuery有另一种用于创建具有属性的元素的语法。也就是说，将一个对象作为第二个参数传递给$函数，这样原始代码就可以这样写。。。

$('#inner').wrap($('<div>', {id:"middle"}));

演示：http://jsfiddle.net/ENmDF/3/

$("#inner")
    .wrap(
        $("<div>")
            .prop("id", "middle")
    );

工作方式与am not i am的答案相同，但这一个使用DOM创建封装它的div元素

请注意，在设置id属性后缺少分号（;）。

演示。

此外，如果你喜欢的话，这里有一句话：

$("#inner").wrap($("<div>").attr("id","middle"));
相关文章：