{"id":16986,"date":"2015-09-05T05:01:52","date_gmt":"2015-09-04T19:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=16986"},"modified":"2015-09-04T13:58:49","modified_gmt":"2015-09-04T03:58:49","slug":"htmljavascript-slotting-in-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-slotting-in-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Slotting In Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Slotting In Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotting_in.jpg\" title=\"HTML\/Javascript Slotting In Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Slotting In Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='Wordpress Posted On CSS Styling Following You Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-posted-on-css-styling-following-you-tutorial\/'>WordPress Posted On CSS Styling Following You Tutorial<\/a> set us to thinking about a generic web application to slot in HTML elements into existing web pages.  There are ways, again, with Javascript DOM to do with nodes and hierarchical child and parent HTML element relationships that may do the job, but we opted to concentrate (with Javascript DOM) on the <a target=_blank title='HTML DOM innerHTML Property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>HTML DOM innerHTML property<\/a>, and nag away at its endless uses, it seems to us.  This property is truly amazingly useful.<\/p>\n<p>As your HTML knowledge has progressed you have no doubt come across HTML elements where the <i>innerHTML<\/i> property is not defined, the one springing to mind being the HTML <a target=_blank title='HTML input tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_input.asp'>input<\/a> element.  They are ones not needing a <i>&lt;\/[tagName]&gt;<\/i> type of closing arrangement.  Our web application, today, still attempts to be able to allow a <i>&#8220;slotting in&#8221;<\/i> even for these, if they have a defined ID= that is.  So how is this done?  Well, <i>innerHTML<\/i> is not only defined for those &#8220;smaller&#8221; sized HTML element arrangements, but it also makes sense for &#8230;<\/p>\n<ul>\n<li>body &#8230; as in document.body.innerHTML &#8230; and do you remember? &#8230;<\/li>\n<li>head &#8230; as in document.head.innerHTML &#8230; and the use of this in <a target=_blank title='HTML\/Javascript Vertical Buttons Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-vertical-buttons-primer-tutorial\/'>HTML\/Javascript Vertical Buttons Primer Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; so we make use of that document.body.innerHTML to slot our new HTML element in front of <i>&lt;[document.getElementById([theID]).tagName] ID=&#8221;[theID]&#8221;<\/i> to make this happen.<\/p>\n<p>What else comes into play today?  One thing that we hadn&#8217;t had to resort to much in the past was the <a target=_blank title='HTMLCollection interface information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCollection'>HTMLCollection<\/a> interface whose friendliness with the return (array) of <i>document.getElementsByTagName([tagName])<\/i> was invaluable.<\/p>\n<p>So all this is all about Javascript DOM and web application client logic, and it may seem a bit of a dry subject at first glance, but, really, it is a thing that is best placed (and understood) in practice, and that is what you should do &#8230; practice with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a>.<\/p>\n<p>Behind this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html\" title='Click picture'>live run<\/a> is the HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slotin.html_GETME\" title='slotin.html'>slotin.html<\/a> and we&#8217;ll leave you with the crucial generic Javascript functionality that makes this functionality work &#8230;<\/p>\n<p><code><br \/>\nfunction slotthisin(placedhtml, intowhat) {<br \/>\n var ispot=0, lastbit=\"\";<br \/>\n if (typeof intowhat === 'undefined') {<br \/>\n  document.body.innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');<br \/>\n } else if (typeof intowhat === 'object') {<br \/>\n  if (typeof intowhat.length === 'undefined') {<br \/>\n   if (intowhat.innerHTML != \"\") {<br \/>\n     if (intowhat.tagName != 'A') {<br \/>\n      intowhat.innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.innerHTML + \"&lt;\/a&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.innerHTML + \"&lt;\/a&gt;\", intowhat.innerHTML + \"&lt;\/a&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.innerHTML + \"&lt;\/A&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.innerHTML + \"&lt;\/A&gt;\", intowhat.innerHTML + \"&lt;\/A&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     }<br \/>\n   } else if (document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.tagName.toUpperCase() + ' ID=\"' + intowhat.id.toUpperCase() + '\"') != -1) {<br \/>\n     ispot=document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.tagName.toUpperCase() + ' ID=\"' + intowhat.id.toUpperCase() + '\"');<br \/>\n     lastbit=document.body.innerHTML.substring(ispot);<br \/>\n     document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;<br \/>\n   }<br \/>\n  } else {<br \/>\n   for (var ii=0; ii&lt;intowhat.length; ii++) {<br \/>\n    if (intowhat.item(ii).innerHTML != \"\") {<br \/>\n     if (intowhat.item(ii).tagName != 'A') {<br \/>\n      intowhat.item(ii).innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + \"&lt;\/a&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.item(ii).innerHTML + \"&lt;\/a&gt;\", intowhat.item(ii).innerHTML + \"&lt;\/a&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     } else if (document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + \"&lt;\/A&gt;\") != -1) {<br \/>\n      document.body.innerHTML=document.body.innerHTML.replace(intowhat.item(ii).innerHTML + \"&lt;\/A&gt;\", intowhat.item(ii).innerHTML + \"&lt;\/A&gt;\" + placedhtml.replace('[action]', '[' + raction + ']'));<br \/>\n     }<br \/>\n    } else if (intowhat.item(ii).id) {<br \/>\n     if (intowhat.item(ii).id != '') {<br \/>\n      if (document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.item(ii).tagName.toUpperCase() + ' ID=\"' + intowhat.item(ii).id.toUpperCase() + '\"') != -1) {<br \/>\n       ispot=document.body.innerHTML.toUpperCase().indexOf(\"&lt;\" + intowhat.item(ii).tagName.toUpperCase() + ' ID=\"' + intowhat.item(ii).id.toUpperCase() + '\"');<br \/>\n       lastbit=document.body.innerHTML.substring(ispot);<br \/>\n       document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n } else if (intowhat != \"\") {<br \/>\n  slotthisin(placedhtml.replace('[action]', '[' + raction + ']'), document.getElementById(intowhat));<br \/>\n } else {<br \/>\n  document.body.innerHTML=placedhtml.replace('[action]', '[' + raction + ']') + document.body.innerHTML;<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d16986' onclick='var dv=document.getElementById(\"d16986\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d16986' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s WordPress Posted On CSS Styling Following You Tutorial set us to thinking about a generic web application to slot in HTML elements into existing web pages. There are ways, again, with Javascript DOM to do with nodes and hierarchical &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-slotting-in-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[1596,354,576,1681,1525,652,997,1319],"class_list":["post-16986","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-document-body-innerhtml","tag-dom","tag-html","tag-htmlcollection","tag-innerhtml","tag-javascript","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16986"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=16986"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16986\/revisions"}],"predecessor-version":[{"id":16992,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16986\/revisions\/16992"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=16986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=16986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=16986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}