使用javascript从Bootstrap 3自动创建输入组

Question

我尝试使用javascript自动将输入框修改为

<div class="input-group">
**<input type="text" class="form-control " placeholder="Text input">**
<span class="input-group-addon">*</span>
</div>

jsfiddle：http://jsfiddle.net/BEC7N/

粗体行是已存在的行。

以下是我的javascript尝试

$('[data-val-required]').prepend(' <div class="input-group">');
$('[data-val-required]').append(' <span class="input-group-addon">*</span></div>');

但它不起作用。有任何想法吗？谢谢。

Answer 1

使用.wrap()

$('[data-val-required]').wrap('<div class="input-group" />');
$('[data-val-required]').after(' <span class="input-group-addon required-indicator">*</span>');

Answer 2

将您的代码更改为：

$('[data-val-required]').wrap(' <div class="input-group"></div>');
$('[data-val-required]').after(' <span class="input-group-addon">*</span>');
$('[data-val-required]').after(' <span class="required-indicator">*</span>');

Working Example