Клонировать фрагмент на HTML - Лучшие практики

Question

Я пытаюсь клонировать раздел на HTML-странице по клику пользователя. В форме я пытаюсь скопировать и добавить группу полей, когда пользователь хочет добавить больше элементов в форму.

Во время клонирования я хочу убедиться, что все идентификаторы переписаны так, чтобы страница и элементы не были повреждены.
Я думал об опрятном способе сделать это.

Пробую следующие подходы. Я больше поддерживаю 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), потому что:

• Более короткий код с меньшей вероятностью содержит ошибку и его легче поддерживать

• Авторы фреймворка уже проделали работу по устранению несоответствий браузера