jquery - 如何使用jquery动态包装和展开带有div的html控件

Question

我正在动态生成 html 控件，现在我想使用 jquery 将 html 内容动态包装在 div 中。

示例：动态生成的控件是

<input type='text' value='default' id='text1'/>

应该包装为

<div class='outerdiv'>
  <input type='text' value='default' id='text1'/>
  <span class='handle'></span>
</div>

我试过了

$('#text1').wrap("<div class='outerdiv'><span class='handle'></span></div>");

并且为了打开我使用

$('#text1').unwrap();

但我无法得到我所期望的。

Answer 1

用于.wrap()将其包含在 div 中，然后使用.after()或.append()添加跨度。

$('#text1').wrap("<div class='outerdiv'></div>").after("<span class='handle'></span>");

要解包和删除，.remove()请在解包之前找到和跨度：

$('#text1').next().remove().end().unwrap();

Answer 2

那这个呢？

$('#text1').wrap('<div class="outerdiv"></div>').after('<span class="handle"></span>');