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

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

假设我在一个回调和＆amp; $（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)
})

演示：Fiddle

Answer 2

试试这个：假设$(this)是<div class="editableTxt" data-model-attr="myAttr" data-model-id="302">VALUE</div>

$input = $('<input/>');
$input.attr('class',$(this).attr('class'));
$input.attr('data-model-attr',$(this).attr('data-model-attr'));
$input.attr('data-model-id',$(this).attr('data-model-id'));
$input.val($(this).text());

Answer 3

$(this).attr('class', 'editBox').val('VALUE');

Answer 4

试试这个：

$(this).addClass("editBox").removeClass("editableTxt").attr("value", $(this).html()).html("");

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

4 个答案: