jquery将元素移动到新元素内部

【问题标题】：jquery move element to inside new elementjquery将元素移动到新元素内部
【发布时间】：2014-12-17 05:15:04
【问题描述】：

例如我有代码：

HTML：

...<input type="text">...

我想获得这个输入（我可以有更多输入）并将“插入”到新创建的元素中，例如 <div> 在同一个地方。

结果：

...<div><input type="text"></div>...

此代码正常工作一半，因为它将输入插入到新元素，但使用“复制”页面中的所有输入。

jQuery:

$('input').after('<div class="inp_cont"/>').append("div.inp_cont");

我试过.detach()

$('input').after('<div class="inp_cont"/>').detach().append("div.inp_cont");

这会创建一个新元素，但不要在里面插入input。

我不知道如何解决我的问题。

【问题讨论】：

【解决方案1】：

只需使用wrap():

$('input').wrap('<div class="inpt_cont"></div>');

$('input').wrap('&lt;div class="inpt_cont"&gt;&lt;/div&gt;');

div {
  border: 1px solid #000;
  margin: 0.2em;
  padding: 0.2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />
<input />
<input />
<input />

如果你想用相同的元素包装由相同选择器匹配的所有元素：

$('input').wrapAll('<div class="inpt_cont"></div>');

$('input').wrap('<div class="inpt_cont"></div>');

$('input').wrapAll('&lt;div class="inpt_cont"&gt;&lt;/div&gt;');

div {
  border: 1px solid #000;
  margin: 0.2em;
  padding: 0.2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />
<input />
<input />
<input />

参考资料：

【讨论】：