Using TAGS with <script> on your websites

Question

This function creates a series of links at a desired destination by the usage of a premade tag system.

Usage:

• createMyTAGS_DATA passes in a single line of all the links as: LinkText;LinkAddress;;
• createMyTAGS_LOCATION passes the destination to a div,span,... to render the result

Result would be:

<a href="LindAddress1">LinkText1</a><a href="LindAddress2">LinkText2</a> [...]

Note: each of tag(LinkText;LinkAddress;;) must have more than 10 characters.

<span onclick="createMyTAGS('LinkText1;LinkAddress1;;LinkText2;LinkAddress2;;','renderHERE');" style="cursor:pointer;"><b>click here</b></span>

<div id="renderHERE"></div>

<script>
    function createMyTAGS(createMyTAGS_DATA,createMyTAGS_LOCATION){
    try{ var linkTags = createMyTAGS_DATA;
         var v1 = createMyTAGS_LOCATION;
    while (linkTags !== '' && linkTags.indexOf(";;") > 10){
    var linkNew = linkTags.slice(0, linkTags.indexOf(";;"));
    var linkText = linkNew.slice(0, linkNew.indexOf(";"));
    linkTags = linkTags.replace(linkNew+';;', '');
    linkNew = linkNew.replace(linkText+';', '');
    linkNew = '<a href="'+linkNew+'" title="'+linkNew+'" target="_blank">'+
              linkText+'</a> ';
    document.getElementById(v1).innerHTML = 
    document.getElementById(v1).innerHTML + linkNew;
    }
    }catch(err){alert('createMyTAGS: '+err.message+
    '; - statement('+createMyTAGS_DATA+','+createMyTAGS_LOCATION+')')}
    }
</script>

Answer 1

From a once over;

• Indent your code, it will be easier to read
• Use lowerCamelCase for your names createMyTAGS -> createMyTags, though personally I would call the function createLinks
  • I would call createMyTAGS_DATA simply s for string or data
  • I would call createMyTAGS_LOCATION either id or element or elementID, you wont then feel the need to assign that parameter to the slightly better named linkTags
• For your string handling, you should read up on .split(), it would make this so much easier
• alert statements are terrible, this function should never go wrong. Consider using console.log instead if you must.
• If you have long variables or chained variables (which you should avoid), consider +=:
  document.getElementById(v1).innerHTML = document.getElementById(v1).innerHTML + linkNew; becomes
  document.getElementById(v1).innerHTML += linkNew;
• Consider using addEventListener instead of assigning the event listener straight into the HTML

My counter proposal:

function createLinks(data, elementId){
      
    var element = document.getElementById(elementId),
        links = data.split(';;'),
        html = element.innerHTML,
        linkParts, url, text;
  
    links.forEach( function( link ){
        linkParts = link.split(';');
        text = linkParts[0];
        url = linkParts[1];
        html += '<a href="'+url+'" title="'+text+'" target="_blank">'+text+'</a> ';   
    });

    element.innerHTML = html;
}

<span onclick="createLinks('LinkText1;LinkAddress1;;LinkText2;LinkAddress2;;','renderHERE');" style="cursor:pointer;"><b>click here</b></span>

<div id="renderHERE"></div>