在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），因为：

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

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