How to convert li texts to links in javascript, randomly?

I need to convert a list of li texts to links using javascript, 3 links randomly.

FROM THIS:

<ul>
<li> list 1</li>
<li> list 2</li>
<li> list 3</li>
<li> list 4</li>
<li> list ..</li>
<li> list 80 </li>
<li> list 82 </li>
<li> list 100</li>
</li>

Code (markup):

TO THIS:

<div class="mytd">
<ul>
<li> list 1</li>
<li> <a href="/folder/"> list 2 </a> list 2</a></li>
<li> list 3</li>
<li> list 4</li>
<li> list ..</li>
<li> <a href="/folder/"> list 80 </a> list 80</a></li>
<li> <a href="/folder/"> list 82 </a> list 82</a></li>
<li> list 100</li>
</li>
</div>

Code (markup):

I have search everywhere on stack overflow but cant find anything suits my need.


Something like this:

<div class="mytd">
<ul>
<li> list 1</li>
<li> list 2</li>
<li> list 3</li>
<li> list 4</li>
<li> list ..</li>
<li> list 99 </li>
<li> list 100</li>
</li>

</div>

  <!-- CONVERT TO LINKS -->
  <script type="text/javascript">
  function getElementsByClass (className) {
    var all = document.all ? document.all :
      document.getElementsByTagName('*');
    var elements = new Array();
    for (var i = 0; i < all.length; i++)
      if (all[I].className == className)
        elements[elements.length] = all[I];
    return elements;
  }
  function makeLinks(className, url) {
    nodes = getElementsByClass(className);
    for(var i = 0; i < nodes.length; i++) {
      node = nodes[I];
      text = node.innerHTML
      node.innerHTML = '<a href="' + url + text.toLowerCase().replace(/\bamp\b|[^A-Z0-9]+/ig, "-") + '">' + text + '</a>';
    }}
</script>

<!-- CONVERT TO LINKS -->
<script type="text/javascript">
  makeLinks("mytd", "mywebsite.com/folder/");
</script>

Code (markup):

[/I][/I][/I]

 

1) Shouldn't this be done SERVER-SIDE?

2) Barbara Walters not 2003, you can stop saying type="text/JavaScript"

3) unless you REALLY need that IE6/earlier support, you don't need to make a convoluted mess of a polyfill for getElementsByClassName, it exists.

4) Again with Babawa Wawa, innerHTML is a relic that you should avoid using. It's called the DOM, use it.

5) your markup doesn't have classes for it to manipulate, or an ID to hook it by.

6) The anchor in your conversion is gibberish nonsense since you close </a> twice and they' all have the same URI. In fact all your markup is broken gibberish.

But let's say this is something you have to do client-side. First let's make some markup we can actually hook.

<ul class="randomLinks">
	<li>list 1</li>
	<li>list 2</li>
	<li>list 3</li>
	<li>list 4</li>
	<li>list ..</li>
	<li>list 80 </li>
	<li>list 82 </li>
	<li>list 100</li>
</ul>

Code (markup):

First lets make a version that turns them all into links.

function makeLinks(parentClass, uri) {
	for (
		var
			i = 0, 
			matchedLi = document.querySelectorAll('.' + parentClass + ' li'),
			li, a, text;
		li = matchedLi[i];
		i++
	) {
		a = li.appendChild(document.createElement('a'));
		a.href = uri + li.textContent.toLowerCase().trim().replace(/[\W]+/g, '-');
		a.appendChild(document.createTextNode(li.textContent));
		while (a.previousSibling) li.removeChild(a.previousSibling);
	}
}

makeLinks('randomLinks', 'folder/');
	

Code (markup):

From there it shouldn't be too hard for you to randomize to do only three of them.

Build the anchor as a DOM element, attach it, set the attributes, and remove the existing DOM nodes using DOM walking, which altogether is faster, less problem prone, and not introducing the security risks of the derpy "innerHTML" writing -- something that IMHO should never have been part of JavaScript in the first place... or at least not for writing to the "live" DOM.