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

Question

例如我有代码：

HTML：

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

我想得到这个输入（我可以有更多输入）和＆＃39;插入＆＃39;在新创建的元素中，例如<div>在同一个地方。

结果：

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

此代码工作正常一半，因为它将输入插入到新元素中，但使用＆＃39; copy＆＃39;来自页面的所有输入。

jQuery的：

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

我尝试了.detach()

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

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

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

Answer 1

只需使用wrap()：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果要使用相同的元素包装由同一个选择器匹配的所有元素：

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

参考文献：

• wrap()。
• wrapAll()。