<!doctype html>
<html>
<head>
<title>Slotting In HTML Elements - RJM Programming - September, 2015</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>

var bigthing="";
var raction="";

var lastw=null;

var url="";

var lis="";
var ris="";
var clis="";
var cris="";

var tlsf="<br><br><br><table id='ltable'><tr id='ltr'></tr></table>";
var trsf="<br><br><br><table id='rtable'><tr id='rtr'></tr></table>";

var xf=null;
var yf=null;

var elemtype = new Array();
var elemid = new Array();
var elemclass = new Array();
var elemcontent = new Array();
var elemucontent = new Array();
var elemvalid = new Array();
var elempos = new Array();
var elemepos = new Array();

function howmany(of, within) {
var sbits=within.substring(1).split(of);
return eval(-1 + sbits.length);
}

function creepback(isp) {
var retval=isp, ii, layer=0;
//alert(document.body.innerHTML.substring(eval(-2 + isp)));
for (ii=eval(-2 + isp); ii>=0; ii--) {
if (document.body.innerHTML.substring(ii, eval(ii + 1)) == ">") layer++;
if (document.body.innerHTML.substring(ii, eval(ii + 1)) == "<") {
layer--;
if (eval(layer) < 0) {
//alert(document.body.innerHTML.substring(eval(-1 + ii)));
return eval(0 + ii);
}
} else {
retval=0;
}
}
return retval;
}

function creepalong(isp, tid) {
var retval=isp, ii,jj=-1,layer=0;
//alert(document.body.innerHTML.substring(eval(1 + isp)));
for (ii=0; ii<elemid.length; ii++) {
if (elemid[ii] == tid) {
isp+=eval(-1 + elemcontent[ii].length);
retval=eval(0 + elemcontent[ii].length);
// alert(elemcontent[ii] + " ... " + document.body.innerHTML.substring(eval(1 + isp)));
}
}
for (ii=eval(1 + isp); ii<document.body.innerHTML.length; ii++) {
if (document.body.innerHTML.substring(ii, eval(ii + 1)) == "<") layer++;
if (document.body.innerHTML.substring(ii, eval(ii + 1)) == ">") {
layer--;
if (eval(layer) < 0) {
if (document.body.innerHTML.substring(eval(1 + ii), eval(3 + ii)) != "</") {
//alert("?" + document.body.innerHTML.substring(eval(1 + ii)));
return eval(1 + ii);
}
}
}
}
return retval;
}

function fillarrays(ofwhat) {
var lso, rso, ac, thisis="";
if (document.getElementById("myiframe").src != '' && document.getElementById("myiframe").src != document.URL) {
//alert(document.getElementById("myiframe").src);
document.getElementById("leftfromselect").style.display='block';
document.getElementById("rightfromselect").style.display='block';
}
if (typeof ofwhat === 'undefined') {
ac=document.body.innerHTML;
lso=document.getElementById("leftintoselect");
rso=document.getElementById("rightintoselect");
} else if (typeof ofwhat === 'object') {
if (typeof ofwhat.length === 'undefined') {
ac=ofwhat.innerHTML;
} else {
ac=ofwhat.item(0).innerHTML;
}
lso=document.getElementById("leftfromselect");
rso=document.getElementById("rightfromselect");
thisis="child";
if (clis == "") {
clis=lso.innerHTML;
}
if (cris == "") {
cris=rso.innerHTML;
}
} else if (ofwhat == "") {
ac=document.body.innerHTML;
lso=document.getElementById("leftintoselect");
rso=document.getElementById("rightintoselect");
} else if (decodeURIComponent(ofwhat).indexOf("<") != -1) {
ac=decodeURIComponent(ofwhat);
lso=document.getElementById("leftfromselect");
rso=document.getElementById("rightfromselect");
thisis="child";
if (clis == "") {
clis=lso.innerHTML;
}
if (cris == "") {
cris=rso.innerHTML;
}
} else {
ac=eval(ofwhat + ".body.innerHTML");
lso=document.getElementById("leftfromselect");
rso=document.getElementById("rightfromselect");
thisis="child";
if (clis == "") {
clis=lso.innerHTML;
}
if (cris == "") {
cris=rso.innerHTML;
}
}
if (lis == "") {
lis=lso.innerHTML;
}
if (ris == "") {
ris=rso.innerHTML;
}
elemtype = [];
elemid = [];
elemclass = [];
elemcontent = [];
elemvalid = [];
elempos = [];
var lsf=lis;
var rsf=ris;
if (thisis != "") {
lsf=clis;
rsf=cris;
}
var uc=ac.toUpperCase();
var bits=uc.split("<");
var layer=0, ipos=0, jpos=0, kpos=0, thistype="", types, subbits, thiscont="", ii, jj, waspos=0;
for (ii=0; ii<bits.length; ii++) {
if (bits[ii].trim() != "" && eval(kpos) >= eval(ipos)) {
waspos=ipos;
types=bits[ii].toUpperCase().replace(" ",">").split(">");
thistype=types[0];
if (uc.indexOf("</" + thistype + ">") != -1) {
subbits=uc.substring(ipos).split("</" + thistype + ">");
layer=howmany("<" + thistype, subbits[0]);
thiscont="";
for (jj=0; jj<layer; jj++) {
//alert(subbits[jj] + " .... " + layer);
jpos+=subbits[jj].length;
if (ipos != jpos) thiscont+=ac.substring(ipos, jpos);
ipos=jpos;
jpos+=thistype.length;
jpos+=3;
if (ipos != jpos) thiscont+=ac.substring(ipos, jpos);
ipos=jpos;
}
//alert("</" + thistype + ">" + " ... " + thiscont);
//alert("1 ... " + thiscont);
elemepos.push(ipos);
elempos.push(waspos);
elemtype.push(thistype.toLowerCase());
elemvalid.push(true);
elemcontent.push(thiscont);
if (thisis != "") elemucontent.push(thiscont.replace(/absolute;/g, "relative;"));
subbits=thiscont.toUpperCase().split(' ID="');
if (subbits.length > 1) {
layer=waspos;
waspos+=subbits[0].length;
waspos+=5;
types=ac.substring(waspos).split('"');
elemid.push(types[0]);
//alert(types[0] + " .y.. " + ac.substring(waspos));
waspos=layer;
} else {
elemid.push("");
}
subbits=thiscont.toUpperCase().split(' CLASS="');
if (subbits.length > 1) {
layer=waspos;
waspos+=subbits[0].length;
waspos+=8;
types=ac.substring(waspos).split('"');
elemclass.push(types[0]);
//alert(types[0] + " .x.. " + ac.substring(waspos));
waspos=layer;
} else {
elemclass.push("");
}
layer=0;
//alert(87);
if (thisis != "") {
if (elemucontent[elemucontent.length - 1].indexOf("<") != -1 && elemucontent[elemucontent.length - 1].indexOf(" ") != -1) {
lsf+="<option value='" + eval(elemucontent.length - 1) + "'>" + elemtype[eval(elemucontent.length - 1)].toUpperCase() + " ( element number " + elemucontent.length + ")" + "</option>";
tlsf=tlsf.replace("</tr>", "<td onclick=\"placeit(this,'leftfromselect',encodeURIComponent(this.innerHTML));\" style='background-color:white;border: 5px solid green;'>" + elemucontent[elemucontent.length - 1] + "</td></TR><tr></tr>");
}
} else {
lsf+="<option value='-" + elempos.length + "'>Before " + thistype + " (element number " + elempos.length + ")</option>";
//alert(88);
lsf+="<option value='" + elempos.length + "'>After " + thistype + " (element number " + elempos.length + ")</option>";
//alert(89);
}
} else if (thistype.substring(0,1) != "!" && thistype.substring(0,1) != "/") {
layer=1;
subbits=ac.substring(ipos).split(">");
thiscont=subbits[0] + ">";
subbits=ac.substring(ipos).split("/>");
if (eval(2 + subbits[0].length) < eval(thiscont.length)) {
thiscont=subbits[0] + "/>";
}
jpos+=thiscont.length;
// alert(ac.substring(ipos, jpos));
if (ipos != jpos) thiscont=ac.substring(ipos, jpos);
ipos=jpos;
if (ac.substring(ipos, eval(2 + ipos)) == "</") {
thiscont+="</" + ac.substring(eval(2 + ipos), eval(2 + ipos + thistype.length)) + ">";
jpos+=eval(3 + thistype.length);
ipos=jpos;
//alert("!" + " ... " + thistype + " +++ " + thiscont);
}
//alert("<" + thistype + "" + " ... " + thiscont);
//alert("2 ... " + thiscont);
if (thiscont.toUpperCase().indexOf("<" + thistype.toUpperCase()) != -1) {
elemepos.push(-1);
elempos.push(waspos);
elemtype.push(thistype.toLowerCase());
elemvalid.push(true);
elemcontent.push(thiscont);
if (thisis != "") elemucontent.push(thiscont.replace(/absolute;/g, "relative;"));
subbits=thiscont.toUpperCase().split(' ID="');
if (subbits.length > 1) {
layer=waspos;
waspos+=subbits[0].length;
waspos+=5;
types=ac.substring(waspos).split('"');
elemid.push(types[0]);
waspos=layer;
//alert(types[0]);
} else {
elemid.push("");
}
subbits=thiscont.toUpperCase().split(' CLASS="');
if (subbits.length > 1) {
layer=waspos;
waspos+=subbits[0].length;
waspos+=9;
types=ac.substring(waspos).split('"');
elemclass.push(types[0]);
waspos=layer;
//alert(types[0]);
} else {
elemclass.push("");
}
layer=0;
if (thisis != "") {
if (elemucontent[elemucontent.length - 1].indexOf("<") != -1 && elemucontent[elemucontent.length - 1].indexOf(" ") != -1) {
rsf+="<option value='" + eval(elemucontent.length - 1) + "'>" + + elemtype[eval(elemucontent.length - 1)].toUpperCase() + " ( element number " + elemucontent.length + ")" + "</option>";
trsf=trsf.replace("</tr>", "<td onclick=\"placeit(this,'rightfromselect',encodeURIComponent(this.innerHTML));\" style='background-color:white;border: 5px solid green;'>" + elemucontent[elemucontent.length - 1] + "</td></TR><tr></tr>");
}
} else {
rsf+="<option value='-" + elempos.length + "'>Before " + thistype + " (element number " + elempos.length + ")</option>";
rsf+="<option value='" + elempos.length + "'>After " + thistype + " (element number " + elempos.length + ")</option>";
}
}
} else if (thistype.substring(0,1) != "/") {
layer=1;
subbits=ac.substring(ipos).split("-->");
thiscont=subbits[0] + "-->";
jpos+=thiscont.length;
if (ipos != jpos) thiscont+=ac.substring(ipos, jpos);
ipos=jpos;
//alert("huh<" + thistype + "" + " ... " + thiscont);
//alert("3 ... " + thiscont);
layer=0;
elemepos.push(-1);
elempos.push(waspos);
elemtype.push("");
elemvalid.push(false);
elemcontent.push(thiscont);
if (thisis != "") elemucontent.push(thiscont.replace(/absolute;/g, "relative;"));
elemid.push("");
elemclass.push("");
}
}
kpos+=bits[ii].length;
kpos++;
}
if (thisis != "") {
lso.innerHTML=lsf;
rso.innerHTML=rsf;
} else {
lso.innerHTML=lsf;
rso.innerHTML=rsf;
if (tlsf.indexOf("<td") != -1 || trsf.indexOf("<td") != -1) {
//lsf=document.getElementById('leftintoselect').innerHTML;
//rsf=document.getElementById('rightintoselect').innerHTML;
//document.body.innerHTML = document.body.innerHTML.replace(rsf + "</select>", rsf + "</select>" + trsf);
//document.body.innerHTML = document.body.innerHTML.replace(lsf + "</select>", lsf + "</select>" + tlsf);
document.getElementById('lefttd').innerHTML+=tlsf;
document.getElementById('righttd').innerHTML+=trsf;
tlsf="<br><table id='ltable'><tr id='ltr'></tr></table>";
trsf="<br><table id='rtable'><tr id='rtr'></tr></table>";
}
}
if (thisis != "") fillarrays('');
}

function docgetclass(inc, intag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(inc);
} else {
var ijl;
var anarris=[];
var huhs=document.getElementsByTagName(intag);
for (ijl=0; ijl<huhs.length; ijl++) {
if (huh[ijl].className.indexOf(intag) != -1) {
anarris.push(huhs[ijl]);
}
}
return anarris;
}
}

function slotthisin(placedhtml, intowhat) {
var ispot=0, lastbit="", cintowhat="";
var tih="";
var bef=document.getElementById('mode').value;
if (typeof intowhat === 'undefined') {
document.body.innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');
} else if (typeof intowhat === 'object') {
if (typeof intowhat.length === 'undefined') {
if (intowhat.innerHTML != "") {
if (document.getElementById('mode').value == 'Before' && intowhat.tagName == 'A') { // ???
if (document.body.innerHTML.indexOf(intowhat.innerHTML + "</a>") != -1) {
ispot=document.body.innerHTML.indexOf(intowhat.innerHTML + "</a>");
} else {
ispot=document.body.innerHTML.indexOf(intowhat.innerHTML + "</A>");
}
ispot=creepback(ispot);
lastbit=document.body.innerHTML.substring(ispot);
//alert(document.body.innerHTML.substring(0,ispot));
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
document.getElementById('mode').value=bef;
} else {
if (intowhat.tagName != 'A') {
if (document.getElementById('mode').value == 'Before') { // ???
//alert(875);
lastbit=intowhat.innerHTML;
intowhat.innerHTML=placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
} else {
intowhat.innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');
}
} else if (document.body.innerHTML.indexOf(intowhat.innerHTML + "</a>") != -1) {
document.body.innerHTML=document.body.innerHTML.replace(intowhat.innerHTML + "</a>", intowhat.innerHTML + "</a>" + placedhtml.replace('[action]', '[' + raction + ']'));
document.getElementById('mode').value=bef;
} else if (document.body.innerHTML.indexOf(intowhat.innerHTML + "</A>") != -1) {
document.body.innerHTML=document.body.innerHTML.replace(intowhat.innerHTML + "</A>", intowhat.innerHTML + "</A>" + placedhtml.replace('[action]', '[' + raction + ']'));
document.getElementById('mode').value=bef;
}
}
} else if (document.body.innerHTML.toUpperCase().indexOf("<" + intowhat.tagName.toUpperCase() + ' ID="' + intowhat.id.toUpperCase() + '"') != -1) {
ispot=document.body.innerHTML.toUpperCase().indexOf("<" + intowhat.tagName.toUpperCase() + ' ID="' + intowhat.id.toUpperCase() + '"');
if (document.getElementById('mode').value == 'After') ispot=creepalong(ispot, intowhat.id);
lastbit=document.body.innerHTML.substring(ispot);
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
document.getElementById('mode').value=bef;
}
} else {
//for (var ii=0; ii<intowhat.length; ii++) {
for (var ii=eval(-1 + intowhat.length); ii>=0; ii--) {
if (intowhat.item(ii).innerHTML != "") {
if (document.getElementById('mode').value == 'Before' && intowhat.item(ii).tagName == 'A') {
if (document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + "</a>") != -1) {
ispot=document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + "</a>");
} else {
ispot=document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + "</A>");
}
ispot=creepback(ispot);
lastbit=document.body.innerHTML.substring(ispot);
//alert(document.body.innerHTML.substring(0,ispot));
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
document.getElementById('mode').value=bef;
} else {
if (intowhat.item(ii).tagName != 'A') {
if (document.getElementById('mode').value == 'Before') { // ???
//alert(872);
lastbit=intowhat.item(ii).innerHTML;
intowhat.item(ii).innerHTML=placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
} else {
intowhat.item(ii).innerHTML+=placedhtml.replace('[action]', '[' + raction + ']');
}
} else if (document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + "</a>") != -1) {
document.body.innerHTML=document.body.innerHTML.replace(intowhat.item(ii).innerHTML + "</a>", intowhat.item(ii).innerHTML + "</a>" + placedhtml.replace('[action]', '[' + raction + ']'));
document.getElementById('mode').value=bef;
} else if (document.body.innerHTML.indexOf(intowhat.item(ii).innerHTML + "</A>") != -1) {
document.body.innerHTML=document.body.innerHTML.replace(intowhat.item(ii).innerHTML + "</A>", intowhat.item(ii).innerHTML + "</A>" + placedhtml.replace('[action]', '[' + raction + ']'));
document.getElementById('mode').value=bef;
}
}
} else if (intowhat.item(ii).id) {
if (intowhat.item(ii).id != '') {
if (document.body.innerHTML.toUpperCase().indexOf("<" + intowhat.item(ii).tagName.toUpperCase() + ' ID="' + intowhat.item(ii).id.toUpperCase() + '"') != -1) {
ispot=document.body.innerHTML.toUpperCase().indexOf("<" + intowhat.item(ii).tagName.toUpperCase() + ' ID="' + intowhat.item(ii).id.toUpperCase() + '"');
if (document.getElementById('mode').value == 'After') {
ispot=creepalong(ispot, intowhat.item(ii).id);
}
lastbit=document.body.innerHTML.substring(ispot);
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
document.getElementById('mode').value=bef;
}
}
}
}
}
} else if (intowhat != "") {
cintowhat="" + eval(intowhat);
//alert(cintowhat);
if (cintowhat.substring(0,1) == '-') {
//alert(8);
if (elemid[eval(-1 - intowhat)] != "" && eval(elemcontent[eval(-1 - intowhat)].length) > 50) {
//alert(88);
tih=document.getElementById(elemid[eval(-1 - intowhat)]).innerHTML;
//alert(888);
if (tih != "") {
//alert(8888);
ispot=document.body.innerHTML.indexOf(tih);
lastbit=document.body.innerHTML.substring(ispot);
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
} else {
ispot=document.body.innerHTML.toUpperCase().indexOf("<" + document.getElementById(elemid[eval(-1 - intowhat)]).tagName.toUpperCase() + ' ID="' + document.getElementById(elemid[eval(-1 - intowhat)]).id.toUpperCase() + '"');
lastbit=document.body.innerHTML.substring(ispot);
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
document.getElementById('mode').value=bef;
tih="x";
}
}
//alert(88888);
if (tih == "") {
//alert(888888);
ispot=elempos[eval(-intowhat - 1)];
lastbit=document.body.innerHTML.substring(ispot);
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
}
} else if (cintowhat.substring(0,1) >= '0' && cintowhat.substring(0,1) <= '9') {
//alert(elempos[eval(-1 + intowhat)] + ": " + elemcontent[eval(-1 + intowhat)]);
if (elemid[eval(-1 + intowhat)] != "" && eval(elemcontent[eval(-1 + intowhat)].length) > 50) {
//alert(elemid[eval(-1 + intowhat)]);
//alert(6);
if (document.getElementById(elemid[eval(-1 + intowhat)]).innerHTML == null) {
//alert(66);
if (document.body.innerHTML.toUpperCase().indexOf("<" + document.getElementById(elemid[eval(-1 + intowhat)]).tagName.toUpperCase() + ' ID="' + document.getElementById(elemid[eval(-1 + intowhat)]).id.toUpperCase() + '"') != -1) {
//alert(666);
ispot=document.body.innerHTML.toUpperCase().indexOf("<" + document.getElementById(elemid[eval(-1 + intowhat)]).tagName.toUpperCase() + ' ID="' + document.getElementById(elemid[eval(-1 + intowhat)]).id.toUpperCase() + '"');
ispot=creepalong(ispot, document.getElementById(elemid[eval(-1 + intowhat)]).id);
lastbit=document.body.innerHTML.substring(ispot);
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
document.getElementById('mode').value=bef;
}
} else {
//alert(6666);
tih=document.getElementById(elemid[eval(-1 + intowhat)]).innerHTML;
if (tih != "" && tih != null) {
//alert(66666);
ispot=document.body.innerHTML.indexOf(tih);
ispot+=tih.length;
ispot+=3;
ispot+=elemtype[eval(-1 + intowhat)].length;
//alert("IsPot=" + eval(elempos[eval(-1 + intowhat)]) + " + " + eval(elemcontent[eval(-1 + intowhat)].length) + " = " + ispot);
} else {
//alert(666666);
if (document.body.innerHTML.toUpperCase().indexOf("<" + document.getElementById(elemid[eval(-1 + intowhat)]).tagName.toUpperCase() + ' ID="' + document.getElementById(elemid[eval(-1 + intowhat)]).id.toUpperCase() + '"') != -1) {
//alert(654);
ispot=document.body.innerHTML.toUpperCase().indexOf("<" + document.getElementById(elemid[eval(-1 + intowhat)]).tagName.toUpperCase() + ' ID="' + document.getElementById(elemid[eval(-1 + intowhat)]).id.toUpperCase() + '"');
ispot=creepalong(ispot, document.getElementById(elemid[eval(-1 + intowhat)]).id);
lastbit=document.body.innerHTML.substring(ispot);
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
document.getElementById('mode').value=bef;
}
}
}
}
if (tih == "") {
if (document.body.innerHTML.indexOf(elemcontent[eval(-1 + intowhat)]) != -1) {
ispot=document.body.innerHTML.indexOf(elemcontent[eval(-1 + intowhat)]);
ispot+=eval(elemcontent[eval(-1 + intowhat)].length);
//alert("Ispot=" + eval(elempos[eval(-1 + intowhat)]) + " + " + eval(elemcontent[eval(-1 + intowhat)].length) + " = " + ispot);
} else if (eval(elemepos[eval(-1 + intowhat)]) >= 0) {
ispot=eval(elemepos[eval(-1 + intowhat)]);
//alert("ISpot=" + eval(elempos[eval(-1 + intowhat)]) + " + " + eval(elemcontent[eval(-1 + intowhat)].length) + " = " + ispot);
} else {
ispot=eval(elempos[eval(-1 + intowhat)]) + eval(elemcontent[eval(-1 + intowhat)].length);
}
}
//alert("ispot=" + eval(elempos[eval(-1 + intowhat)]) + " + " + eval(elemcontent[eval(-1 + intowhat)].length) + " = " + ispot);
lastbit=document.body.innerHTML.substring(ispot);
//alert(lastbit);
document.body.innerHTML=document.body.innerHTML.substring(0,ispot) + placedhtml.replace('[action]', '[' + raction + ']') + lastbit;
} else {
//alert(987);
slotthisin(placedhtml.replace('[action]', '[' + raction + ']'), document.getElementById(intowhat));
}
} else {
document.body.innerHTML=placedhtml.replace('[action]', '[' + raction + ']') + document.body.innerHTML;
}
fillarrays('');
document.getElementById('mode').value=bef;
}

function firstoff() { // proof of concept only
slotthisin("<select><option value='wow'>wow</option><option value='cow'>cow</option></select>", document.getElementsByTagName('a'));
slotthisin("<select><option value='wow'>wow</option><option value='cow'>cow</option></select>", 'myh1');
slotthisin("<select><option value='wow'>wow</option><option value='cow'>cow</option></select>");
slotthisin("<select><option value='wow'>wow</option><option value='cow'>cow</option></select>", document.getElementsByTagName('p'));
slotthisin("<select><option value='wow'>wow</option><option value='cow'>cow</option></select>", 'mybut');
slotthisin("<select><option value='wow'>wow</option><option value='cow'>cow</option></select>", document.getElementById('myh2'));
}

function onclickf(proposedhtml, slotthing) {
if (typeof slotthing === 'undefined') {
slotthisin(proposedhtml);
} else if (slotthing == " ") {
slotthisin(proposedhtml, '');
} else if (slotthing == "") {
if (bigthing == "") {
slotthisin(proposedhtml);
} else {
slotthisin(proposedhtml, eval(bigthing));
}
} else {
slotthisin(proposedhtml, eval(slotthing));
}
}

function andthen() {
xf = document.getElementById("myiframe");
yf = (xf.contentWindow || xf.contentDocument);
if (yf.document) { yf = yf.document; }
if (yf.body == null) {
setTimeout(andthen, 2000);
} else {
fillarrays(encodeURIComponent(yf.body.innerHTML));
}
}

function changedhtml(inv) {
if (inv.indexOf("<") != -1 || inv.indexOf("lt;") != -1) {
inv=inv;
} else if (inv != "") {
document.getElementById("myiframe").src=decodeURIComponent(inv);
document.getElementById('leftfromselect').innerHTML=document.getElementById('leftfromselect').innerHTML.replace("select element to slot in", "select " + decodeURIComponent(inv) + " element to slot in");
document.getElementById('rightfromselect').innerHTML=document.getElementById('rightfromselect').innerHTML.replace("select element to slot in", "select " + decodeURIComponent(inv) + " element to slot in");
setTimeout(andthen, 2000);
if (1 == 2) {
xf = document.getElementById("myiframe");
yf = (xf.contentWindow || xf.contentDocument);
if (yf.document) { yf = yf.document; }
fillarrays(encodeURIComponent(yf.body.innerHTML));
}
} else {
var ubits=document.URL.split("?");
var egis=ubits[0].replace("/HTMLCSS/slotin.html", "/").replace("/slotin.html", "/").replace("slotin.html", "");
var preinv=prompt("Optionally supply URL whose HTML Elements you would like to be able to place eg. " + egis, egis);
if (preinv == null) preinv="";
if (preinv != "") changedhtml(preinv);
}
}

function placeit(ois,oid,oval) {
var okay=true;
var tbid=oid=oid.replace('fromselect', 'intext');
var tbido=document.getElementById(tbid);
if (oval.indexOf("<") != -1) {
okay=false;
tbido.value=oval;
} else if (decodeURIComponent(oval).indexOf("<") != -1) {
okay=false;
tbido.value=decodeURIComponent(oval);
} else {
tbido.value=elemucontent[eval(oval)]; //.replace(/</g, "<").replace(/>/g, ">");
}
if (okay) {
if (lastw != null) {
lastw.close();
lastw=null;
}
lastw=window.open("", "_blank", "top=100,left=100,width=400,height=400");
lastw.document.write("<html><head><title>Slotting In HTML Elements - RJM Programming - September, 2015</title><link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'></head><body>" + tbido.value + "</body></html>");
} else {
ois.style.backgroundColor='purple';
window.scrollTo(0, 0);
}
}
</script>
</head>
<body style='background-color: lightgray;' onload=" url = location.search.split('url=')[1] ? location.search.split('url=')[1].split('&')[0] : ''; if (url != '') { changedhtml(url); } fillarrays('');">

<h1 id='myh1' class='h1' align='center'>Slotting In HTML Elements <select id='mode' class='select'><option value='Nearby'>Nearby</option><option value='Before'>Before (default for innerHTML blank)</option><option value='After'>After (default for innerHTML not blank)</option></select></h1>
<h3 id='myh3' class='h3' align='center'>RJM Programming</h3>
<h4 id='myh4' class='h4' align='center'>September, 2015</h4>
<p id='myp' class='p' align='center'>...</p>
<div id='mydiv' class='div' align='center' style='background-color:teal;'>
<table id='mytable' class='table' style='width:98%;' cellpadding=2 cellspacing=2>
<tbody id='mytbody' class='tbody' style='background-color: yellow;'>
<tr id='mytrth' class='tr'>
<th id='leftth' class='th' style='width:50%;'>HTML Elements with<a id='lefta' class='a' target=_blank title='HTML DOM innerHTML Property information from w3schools' href='http://www.w3schools.com/jsref/prop_html_innerhtml.asp'> innerHTML </a>not Blank</th>
<th id='rightth' class='th' style='background-color: pink;'>HTML Elements with Blank <a id='righta' class='a' target=_blank title='HTML DOM innerHTML Property information from w3schools' href='http://www.w3schools.com/jsref/prop_html_innerhtml.asp'>innerHTML</a></th>
</tr>
<tr id='mytrtd' class='tr'>
<td id='lefttd' class='td' valign='top'><form id='leftform' class='form'><br><br><span style='margin-top:0px;'>Slot In (<a href='#' title='Optionally choose a URL in which to extract HTML elements available to slot into others here' onclick="changedhtml('');">Url</a>'s) HTML Elements <input id='leftintext' onblur='changedhtml(this.value);' title="id=leftintext class=input type=text" class='input' type='text' style='width:80%;' value="<select><option value='wow'>wow [action]</option><option value='cow'>cow</option></select>" /></span><br><br><select id='leftfromselect' onchange='placeit(this,this.id,this.value);' style='display:none;' class='select'><option value=''>Please, optionally, select element to slot in ...</option></select><br><br>Slot Into HTML Element <select id='leftintoselect' class='select' style='background-color:cyan;' onchange="raction=this.value; bigthing=this.value; onclickf(document.getElementById('leftintext').value, this.value); "><option value=' ' class='option'>Please choose an action below ...</option><option value='' class='option'>Append HTML</option><option value=' ' class='option'>Place HTML at Top</option><option value="document.getElementsByTagName('th')" class='option' title="document.getElementsByTagName('th')">All TH</option><option value="document.getElementsByTagName('a')" class='option' title="document.getElementsByTagName('a')">All A</option><option id='myoption' value="document.getElementById('myoption')" class='option' title="document.getElementById('myoption')">This OPTION (example of one that is impossible)</option><option value="document.getElementById('mydiv')" class='option' title="document.getElementById('mydiv')">This DIV</option><option value="docgetclass('td','td')" class='option' title="docgetclass('td','td')">Class TD</option><option value="docgetclass('h1','h1')" class='option' title="docgetclass('h1','h1')">Class H1</option><option value="document.getElementById('myh3')" class='option' title="document.getElementById('myh3')">The H3</option><option value="docgetclass('h4','h4')" class='option' title="docgetclass('h4','h4')">Class H4</option><option value="document.getElementsByTagName('p')" class='option' title="document.getElementsByTagName('p')">All P</option></select><br><br></form></td>
<td id='righttd' class='td' style='background-color: pink;' valign='top'><form id='rightform' class='form'><br><br><span style='margin-top:0px;'>Slot In (<a href='#' title='Optionally choose a URL in which to extract HTML elements available to slot into others here' onclick="changedhtml('');">Url</a>'s) HTML Elements <input id='rightintext' onblur='changedhtml(this.value);' title="id=rightintext class=input type=text" class='input' type='text' style='width:80%;' value="<select><option value='wow'>wow [action]</option><option value='cow'>cow</option></select>" /></span><br><br><select id='rightfromselect' onchange='placeit(this,this.id,this.value);' style='display:none;' class='select'><option value=''>Please, optionally, select element to slot in ...</option></select><br><br>Slot Into HTML Element <select id='rightintoselect' class='select' style='background-color:cyan;' onchange="raction=this.value; bigthing=this.value; onclickf(document.getElementById('rightintext').value, this.value); "><option value=' ' class='option'>Please choose an action below ...</option><option value='' class='option'>Append HTML</option><option value=' ' class='option'>Place HTML at Top</option><option value="document.getElementsByTagName('input')" class='option' title="document.getElementsByTagName('input')">All INPUT</option><option value="docgetclass('input','input')" class='option' title="docgetclass('input','input')">Class INPUT</option><option value="document.getElementsByTagName('img')" class='option' title="document.getElementsByTagName('img')">All IMG</option></select><br><br></form></td>
</tr>
</tbody>
</table>
<iframe id='myiframe' style='display:none;' src=''></iframe>
</div>
<br><br><img id='myimg' class='img' align='center' src='//www.rjmprogramming.com.au/Welcome_files/shapeimage_1d.jpg' title='My Image'></img>
</body>
</html>