cloneNode( )
One final method available to you when working with DOM nodes is cloneNode( )
. Using this powerful method, you can replicate an individual node (by supplying the method with an argument of false
) or the node and all of its descendant nodes (by supplying it with an argument of true
). Here is an example of cloneNode( )
in use:
var ul = document.createElement( 'ul' ); var li = document.createElement( 'li' ); li.className = 'check'; for( var i=0; i < 5; i++ ){ var new_li = li.cloneNode( true ); new_li.appendChild( document.createTextNode( 'list item ' + ( i + 1 ) ) ); ul.appendChild( new_li ); }
The benefits may not seem immediately apparent by looking at this example, but there is a major benefit in performance: cloning a node is a much faster process than building a new one from scratch.
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.