{"id":21548,"date":"2016-04-26T03:01:55","date_gmt":"2016-04-25T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=21548"},"modified":"2016-04-26T19:41:30","modified_gmt":"2016-04-26T09:41:30","slug":"htmljavascript-dom-cloning-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-dom-cloning-primer-tutorial\/","title":{"rendered":"HTML\/Javascript DOM Cloning Primer Tutorial"},"content":{"rendered":"
\"HTML\/Javascript<\/a>

HTML\/Javascript DOM Cloning Primer Tutorial<\/p><\/div>\n

Javascript DOM<\/a> is hugely useful for creating dynamic client functionality for web pages. And we don’t mean for you to “Hug Ely” … though you can if he’s right next to you …<\/font> we mean, primarily for us, the following http:\/\/localhost:8888 MAMP web page code type Javascript DOM usage statistical table of Javascript DOM property usage findings …<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
http:\/\/localhost:8888\/<\/th>\n*.htm<\/th>\n*.html<\/th>\n*.js<\/th>\n*.php<\/th>\n<\/tr>\n
Count<\/td>\n68<\/td>\n1333<\/td>\n53<\/td>\n311<\/td>\n<\/tr>\n
Count DOM .id usage<\/td>\n63<\/td>\n478<\/td>\n93<\/td>\n168<\/td>\n<\/tr>\n
Count DOM .classname usage<\/td>\n0<\/td>\n0<\/td>\n2<\/td>\n0<\/td>\n<\/tr>\n
Count DOM .title usage<\/td>\n103<\/td>\n551<\/td>\n126<\/td>\n512<\/td>\n<\/tr>\n
Count DOM .src usage<\/td>\n76<\/td>\n508<\/td>\n113<\/td>\n190<\/td>\n<\/tr>\n
Count DOM .href usage<\/td>\n73<\/td>\n352<\/td>\n48<\/td>\n1009<\/td>\n<\/tr>\n
Count DOM .value usage<\/td>\n386<\/td>\n2565<\/td>\n431<\/td>\n1524<\/td>\n<\/tr>\n
Count DOM .innerHTML usage<\/td>\n283<\/td>\n2613<\/td>\n464<\/td>\n1243<\/td>\n<\/tr>\n
Count DOM .outerHTML usage<\/td>\n3<\/td>\n4<\/td>\n0<\/td>\n11<\/td>\n<\/tr>\n<\/table>\n

… and it is no surprise to me that Javascript DOM property .innerHTML<\/a> almost tops the bill, with its usefulness on scenarios like yesterday’s Canvas Annotation Email Attachment Snapshots Tutorial<\/a> dynamically creating and building up HTML select “dropdown” elements.<\/p>\n

But why so little use of the Javascript DOM property .outerHTML<\/a>? Well, this property has not always been fully supported by all web browsers and has been known to cause problems<\/a> on occasions.<\/p>\n

Nevertheless, Javascript DOM property .outerHTML<\/a> has usefulness regarding HTML element text reformatting, and we find a use today using it to “clone” an existing web page into other “clone” web pages opened in popup windows via Javascript window.open<\/a> that we apply to the web pages of HTML\/Javascript Word Categories Game Tutorial<\/a> as shown below.<\/p>\n

Maybe you see a small “cloning accuracy” improvement with the retention of the document body yellow background colour because of the totalclone<\/i> use of document.body.outerHTML<\/i> rather than (the clone<\/i>) via the use of the concatenation of the document body element constituent outerHTML parts.<\/p>\n


\n clone=window.open('','_blank','top=60,left=60,width=950,height=700');
\n clone.document.write(\"<html>\" + document.head.outerHTML.replace('function goaga' + 'in() {', 'function goaga' + 'in() { return; ') + \"<body>\" + h1s[0].outerHTML.replace('Categories Game', 'Categories ' + five + ' Second Game') + h3s[0].outerHTML + divs[0].outerHTML + \"<\/body>\" + \"<\/html>\");
\n totalclone=window.open('','_blank','top=60,left=160,width=950,height=700');
\n totalclone.document.write(\"<html>\" + document.head.outerHTML.replace('function goaga' + 'in() {', 'function goaga' + 'in() { return; ') + document.body.outerHTML.replace('Categories Game', 'Categories ' + five + ' Second Game') + \"<\/html>\");
\n<\/code><\/p>\n

Today we have HTML and Javascript programming source code you could call wordcategories.html<\/a> which changed from the non-cloning version below this way<\/a> and which has a live run link<\/a>.<\/p>\n

Perhaps you can see further uses for .outerHTML in other non-mission-critical scenarios. If useful, am sure you’ll find your code a lot shorter than if you use .innerHTML equivalent functionalities.<\/p>\n

\n

Previous relevant HTML\/Javascript Word Categories Game Tutorial<\/a> is shown below.<\/p>\n

\"HTML\/Javascript<\/a>

HTML\/Javascript Word Categories Game Tutorial<\/p><\/div>\n

Do you like word games? Today’s game asks you to categorize words … we’re going to call the game “The Word Categories Game”<\/i> (too snappy for you?!) … and you score points (you get more points for advanced word categorizations) for each correct word you supply that satisfies the requirements. It uses English words, based on the dictionary arrangements at its (web) server. Maybe it would be a good game to learn English vocabulary.<\/p>\n

Today’s data source is a book called Five-Minute Activities<\/i> by Penny Ur and Andrew Wright. We thank this source for their great Categories word list on pages 6 and 7.<\/p>\n

This game<\/a> uses HTML and Javascript programming languages.<\/p>\n

Hopefully you can figure the rules when you click the picture above for a live run<\/a>.<\/p>\n

Another thank you to The Free Dictionary<\/a> for its great online presence as a dictionary resource, for the functionality to explain an unknown or incomplete answer for the word in question, for its dictionary meaning. The image map “click parts of the picture” vocabulary ESL tutorials<\/a> at this blog use the same resource to explain dictionary information about clicked on “things”.<\/p>\n

Programming features of this program are the Javascript use of eval<\/a> and document.write<\/a> to make use of pre-defined arrays. Read more about Javascript eval with a previous tutorial called PHP\/Javascript Eval Primer Tutorial<\/a>.<\/p>\n

Anyway, see how you go with this organizational game!<\/p>\n

Thanks to Mobilefish for ImageMap service at http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php<\/a>.<\/p>\n

Here is a link to some downloadable HTML (with Javascript) programming code you could rename to wordcategories.html<\/a><\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n