Results 1 to 6 of 6

Thread: cloning a branch of DOM tree with JavaScript

  1. #1

    Thread Starter
    Member
    Join Date
    Jul 2007
    Posts
    36

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

  2. #2
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: cloning a branch of DOM tree with JavaScript

    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)

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  3. #3

    Thread Starter
    Member
    Join Date
    Jul 2007
    Posts
    36

    Re: cloning a branch of DOM tree with JavaScript

    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.
    Last edited by kender; Nov 25th, 2014 at 12:14 AM.

  4. #4
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: cloning a branch of DOM tree with JavaScript

    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.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  5. #5
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: cloning a branch of DOM tree with JavaScript

    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.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  6. #6
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: cloning a branch of DOM tree with JavaScript

    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 View Post
    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.
    Last edited by penagate; Dec 8th, 2014 at 10:20 PM.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width