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

时间:2016-01-07 12:56:38

标签: javascript jquery html clone

我正在尝试在用户点击时克隆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"); }));
                    }

1 个答案:

答案 0 :(得分:0)

“最佳”是主观的,但我更喜欢使用框架(例如jQuery),因为:

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

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