JavaScript使用cloneNode克隆表单时如何清除文本框已有内容

问题原因 #

cloneNode(true)会完整克隆节点的当前状态，包括表单元素用户输入后的实时value值，之前的方案失效有两个原因：一是直接用getElementById会命中原节点的元素（克隆后ID重复，DOM默认返回第一个匹配元素），二是childNodes只遍历直接子节点，不会递归查找深层嵌套的表单元素。

修改后的完整代码 #

var counter = 0;
function moreField() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }

    // 新增清空逻辑：在新克隆的节点范围内查找所有文本输入框、文本域
    var inputs = newFields.querySelectorAll('input[type="text"], textarea');
    inputs.forEach(function(el) {
        el.value = '';
    });

    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields, insertHere);
}

额外说明 #

如果后续还需要支持清空其他表单元素，可以在querySelectorAll的选择器里追加对应规则，比如要清空单选框可以加, input[type="radio"]，清空下拉框可以加, select，再对应写赋值逻辑即可。

内容的提问来源于stack exchange，提问作者Mattr42