Question

我有几个<div>这样：

<div>
    <div id='1'></div>
    <div id='2'></div>
    <div id='3'></div>
</div>

如何在JS或jQuery中动态创建另一个div来覆盖div#1和div#2？

<div id='event'>EVENT</div>

感谢。

Answer 1

您可以使用jQuery提供的new.json功能

＆＃13;

wrapAll

＆＃13;

$("#1, #2").wrapAll( "<div class='new' id='event'>EVENT</div>");

＆＃13;

.new{
  color : red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div> <div id='1'>1..</div> <div id='2'>2..</div> <div id='3'>3..</div> </div>函数可以接受任何可以传递给$（）函数的字符串或对象来指定DOM结构。这个结构可以嵌套几层深，但应该只包含一个inmost元素。该结构将作为一个组包裹在匹配元素集中的所有元素周围。

Here了解更多详情

Answer 2

我在Mozilla的doc页面上找到了这个，描述了outerHTML属性。

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

获得要包装的代码部分后，将其重新分配给1正面的<div>和2背面的</div>。

d1 = document.getElementById('1');

d2 = document.getElementById('2');

d1.outerHTML = '<div>' + d1.outerHTML;

d2.outerHTML = d2.outerHTML + '</div>';

如何使用JS / Jquery将div覆盖在2个其他div上

2 个答案: