jQuery将一个元素转换为另一个元素

Question

我有一个div元素如下;

<div class="editableTxt" data-model-attr="myAttr" data-model-id="302">VALUE</div>

我想把它转换成

<input class="editBox" data-model-attr="myAttr" data-model-id="302" value="VALUE" />

是否有通用的方法来做同样的事情？

假设我在回调中,$(this)表示div元素..

Answer 1

尝试

$('.editableTxt').each(function () {
    var $input = $('<input/>').val($.trim(this.innerHTML));
    $.each(this.attributes, function (i, attr) {
        $input.attr(attr.name, attr.value);
    });
    $(this).replaceWith($input)
})

演示:小提琴