删除并重新创建事件的元素:

Remove and Re-Create Element on event:

本文关键字：事件 元素 创建 新创建 删除      更新时间：2023-09-26

我正试图删除整个元素，并在事件上重新创建它：尽管同一代码有几种变体，但我似乎无法做到这一点：

例如，在事件中，我需要删除元素，然后重新创建相同的元素。我不想删除文本：

这是我尝试过的（实验）：结果不一致，代码重复。

function removeCreate(){
    var input = document.getElementById('display');
    var body = document.getElementsByTagName('body')[0];
    if(!!input){
        input.parentNode.removeChild(input);
        input = document.createElement('input');
        input.id = 'display';
        input.setAttribute('type',"text");
        body.appendChild(input);
    } else {
        input.parentNode.removeChild(input);
        input = document.createElement('input');
        input.id = 'display';
        input.setAttribute('type',"text");
        body.appendChild(input);
    }
}

您删除输入元素并重新创建它的原因尚不清楚，但假设它以某种方式被修改，并且您希望"重置"其状态。

当你说"我不想删除文本"时，我最可能理解的是你想保留用户在输入中键入的当前值。

如果这适合您的情况，那么您可以简单地将输入元素的"模板"保存在内存中，这样您就可以在需要时克隆它，并使用克隆来替换DOM中的模板。执行此操作时，首先检索当前输入值，然后将其注入到克隆的输入中。

结果：

var inputTemplate = document.createElement('input');
inputTemplate.setAttribute('type', 'text');
function cloneInput() {
    var newInput = inputTemplate.cloneNode(true);
    newInput.id = 'display';
    return newInput;
}
var input = document.getElementById('display');
var body = document.getElementsByTagName('body')[0];
if(!!input){
    // First retrieve the current value (what the user has typed / default value)
    var value = input.value;
    input.parentNode.removeChild(input);
    input = cloneInput();
    input.value = value; // Re-inject the value.
    body.appendChild(input); // Note that this would put your input at the bottom of the page.
} else {
    //input.parentNode.removeChild(input); // useless?
    input = cloneInput();
    body.appendChild(input);
}
相关文章：