{"id":39635,"date":"2018-07-23T03:01:28","date_gmt":"2018-07-22T17:01:28","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=39635"},"modified":"2018-07-21T22:58:30","modified_gmt":"2018-07-21T12:58:30","slug":"html-a-link-innerhtml-extender-and-event-propogation-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-a-link-innerhtml-extender-and-event-propogation-primer-tutorial\/","title":{"rendered":"HTML a Link innerHTML Extender and Event Propogation Primer Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML a Link innerHTML Extender and Event Propogation Primer Tutorial<\/p><\/div>\n

Guess the recent PDF Attachments Add Page Tutorial<\/a> got me in the mood for “nesting”, and a curiosity I’ve always had, but never “implemented”, is to do a Javascript DOM thing that feels a lot like “linked list” work and involving an HTML “a” link’s innerHTML<\/a> property.<\/p>\n

Today’s tutorial picture<\/a>, we are hoping, is “worth a thousand words”, because this is a bit esoteric explaining purely in words, but will try as a “stepped set of instructions” below …<\/p>\n

    \n
  1. start with a “a” link that looks as below …
    \n
    \n<a title='Show me' style='text-decoration:underline;cursor:pointer;' id='origsnake1' onclick=\"show('tdsnake',this);\">Snakes ... <\/a>
    \n<\/code>\n<\/li>\n
  2. allow for user interaction that offers you to extend that “a” link’s wording as per the HTML …
    \n
    \n<input type=text id='iadd' value=''><\/input> <input style='background-color:yellow;' onclick=\"addthis(document.getElementById('iadd'));\" type='button' value='Add...'><\/input>
    \n<\/code>\n<\/li>\n
  3. clicking that button calls on the salient<\/em> “linked list” feeling Javascript DOM code …
    \n
    \nvar addto='origsnake1';
    \nfunction addthis(inputo) {
    \n var nextto=eval(1 + eval(addto.replace('origsnake','')));
    \n document.getElementById(addto).innerHTML+=\"<\/a><a title='Show me' style='text-decoration:underline;cursor:pointer;' id='origsnake\" + nextto + \"' onclick=\\\"show('tdsnake',this);\\\">\" + inputo.value.replace(' ... ','').replace(' ...','').replace('...','') + \" ... \";<\/em>
    \n addto='origsnake' + nextto;
    \n}
    \n<\/code>\n<\/li>\n
  4. and the user clicking on one of those “a” links calls on Javascript code …
    \n
    \nfunction show(supervisor,curo) {
    \n alert(\"This innerHTML=\" + curo.innerHTML + \" and the overall table cell innerHTML=\" + document.getElementById(supervisor).innerHTML);
    \n}
    \n<\/code>
    \n … that propogates up through the hierarchy of “a” links created on the fly this way\n<\/li>\n<\/ol>\n

    Perhaps you are in “nesting” form too, and find a_extender.html<\/a>‘s live run<\/a> interesting too?!<\/p>\n

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