[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.