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元素。

- copenndthagen

---

你能不能不修改HTML？ - Rory McCrossan

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)
})

Demo: Fiddle

- Arun P Johny

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());

- Bhushan Kawadkar

Answer 3

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

- martynas

Answer 4

试试这个：

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

- ZiNNED