cloning a branch of DOM tree with JavaScript

[Folks, I’m new to web dev and JS, but not new to programming. This is for a personal project that I’m entertaining.]

I already know that there is a way to dynamically change a web page by moving a branch of a DOM tree and appending it to a different parent. Is there a way to clone a branch of a DOM tree and dynamically create HTML that way?

I have a specific scenario in mind: a table where a visitor can dynamically add and remove rows.

If cloning a branch is possible, it may be more efficient (less JavaScript code) than making lots of appendChild(…) calls for every node within the branch.

The only idea I had so far was newClone.innerHtml = templateTableRow.innerHtml;. But, I’ve read that innerHtml is may get deprecated, and it's generally frowned on. On the other hand, this kind of cloning may actually be a good use for innerHtml. Then again, what good will it be if innerHtml gets deprecated and browsers stop supporting it.

You do stuff like that with a library like jQuery so that you have cross-browser support.

Look at this string of jQuery methods

Code:

---

$("#acs-label").clone().appendTo(strPanel + "-edit .acs-edit-top-tab").removeAttr("id").addClass("acs-edit-label").html("");

---

$("#acs-label") - find ID #acs-label in the DOM - and return it in an array of items (will be just one item in that array since ID's are unique on a page).
.clone() - clone it - make a copy of what was in the DOM - and return it
.appendTo() - append what you just cloned to whatever "strPanel +..." resolves to in the DOM
.removeAttr() - can't have another item with this ID name - better remove it
.addClass() - add some CSS classes
.html() - sets the HTML of this item (label) to "" (blank string)

Speaking of jQuery. One of the questions that I have is whether or not to learn/investigate jQuery, or to spend more time with the standard-issue JavaScript. This is only for a personal project, so there is no legacy code and no external pressure.

Once you get proficient at jQuery you realize that it's just a comprehensive library. Around lines of jQuery like I showed above there are tons of standard JavaScript running around it.

For something relatively small, or where super speed is required, you're probably better off without the bloat of jQuery. For anything larger, the benefits of a library like jQuery (cross-browser consistency, animations, etc.) are a huge bonus. A large number of js widgets and frameworks (eg. bootstrap) are also built on top of jQuery. Even something smaller like underscore.js can prove useful if you're not going the whole jQuery route.

Use cloneNode
To perform a recursive copy (copying all descendants of the node as well), pass a single argument of 'true'.

Code:

---

var newClone = templateTableRow.cloneNode(true)

---

On jQuery, I'd actually make the opposite recommendation to tr333. I'd avoid it for larger projects, unless you need to support really old browsers (any version of IE pre 11). It adds lot of weight and complexity and actually makes debugging quite difficult (I find it very slow too). Use the native interfaces, unless you've a really compelling reason not to.

Here's szlamany's example rewritten in standard code:

Quote:

---

Originally Posted by szlamany

Code:

---

$("#acs-label").clone().appendTo(strPanel + "-edit .acs-edit-top-tab").removeAttr("id").addClass("acs-edit-label").html("");

---

---

Code:

---

var panel = document.querySelector(strPanel+'-edit .acs-edit-top-tab');
panel.id = '';
panel.classList.add('acs-edit-label');
while (panel.firstChild) panel.removeChild(panel.firstChild);
panel.appendChild(document.getElementById('acs-label').cloneNode(true));

---

Yes, it's a bit more code, but not much. (I guessed that the selector ought to return one item. If it returned a set, you'd use querySelectorAll.)
I converted a reasonably-sized project from jQuery to native DOM and the code size didn't increase significantly. Performance, on the other hand, did.