在 HTML 上克隆片段 - 最佳实践 [关闭]

Question

我正在尝试在用户单击时克隆 HTML 页面上的部分。 在表单中，当用户想要向表单添加更多元素时，我正在尝试复制和添加字段组。

在克隆时，我想确保所有 id 都被重写，以便页面和元素完好无损。
我一直在考虑一种巧妙的方法来做到这一点。

尝试以下方法。 由于表达式的紧凑和美观，我更赞成 JQuery。 很想听听专家的一些观点。

JS 方法：

function addElementToParentById(src) {

var temp = document.getElementById(src);
var tempParent = temp.parentElement;
var tempNew = temp.cloneNode(true);
renameIds(tempNew,"1");
tempParent.appendChild(tempNew);

}

function renameIds(param, token) {

if(param.id){
    param.id=param.id+token;
}

for(i =0; i < param.childNodes.length; i++) {
    var tempChild = param.childNodes[i];
    if(tempChild.id) {
        tempChild.id = tempChild.id + token;
    }

    if(tempChild.childNodes 
            && tempChild.childNodes.length > 0) {
        for(j =0; j < param.childNodes.length; j++) {
            renameIds(tempChild.childNodes[j], token);
        }
    }
}

}

jquery方法：

$("#addbtnid").click( function() {
                        $("#filopsmainpane").append($("#filopspane").clone(false).find("*[id]").andSelf().each(
                            function() { $(this).attr("id", $(this).attr("id") + "1"); }));
                    }

Answer 1

“最佳”是主观的，但我更喜欢使用框架（例如 jQuery），因为：

• 更短的代码不太可能包含错误并且更易于维护

• 框架的作者已经完成了处理浏览器不一致的工作