jQuery将元素移动到新元素内部 [英] jquery move element to inside new element

问题描述

例如，我有代码:

HTML:

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

我想获得此输入(我可以有更多输入)并将其插入"到新创建的元素中，例如在同一位置的<div>.

And I would like get this input (I can have more inputs) and 'insert' in to new created element e.g <div> in the same place.

结果:

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

此代码可以正常工作一半，因为它将输入插入到新元素中，但是可以从页面中复制"所有输入.

This code working half correctly, because it inserts input to new element, but with 'copy' all input from page.

jQuery:

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

我尝试过.detach()

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

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

This creates a new element, but don't insert input inside.

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

I haven't idea how resolve my problem.

推荐答案

只需使用wrap():

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

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

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 />

如果要包装由相同选择器匹配的所有元素，请使用相同的元素:

If you want to wrap all elements, matched by the same selector, with the same element:

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

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

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

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 />

参考文献:

• wrap() .
• wrapAll() .

这篇关于jQuery将元素移动到新元素内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！