在 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

"Best" 是主观的，但我更喜欢使用框架（例如 jQuery），因为：

较短的代码不太可能包含错误并且更易于维护
框架的作者已经完成了处理浏览器不一致的工作

在 HTML 上克隆片段 - 最佳实践

Clone a fragment on HTML - Best practices

html

javascript

jquery

clone