Should I do this with HTML or jQuery loop

[m2244]

Hello,

Right now I have some HTML code on my page that will be used for a glossary feature. I am wondering if I should create this list with jQuery or leave it as HTML.

My concerns are loading time as well as code simplification.

<div>
	<a href="#">A</a>
	<a href="#">B</a>
	<a href="#">C</a>
	<a href="#">D</a>
	<a href="#">E</a>
	<a href="#">F</a>
	<a href="#">G</a>
	<a href="#">H</a>
	<a href="#">I</a>
	<a href="#">J</a>
	<a href="#">K</a>
	<a href="#">L</a>
	<a href="#">M</a>
	<a href="#">N</a>
	<a href="#">O</a>
	<a href="#">P</a>
	<a href="#">Q</a>
	<a href="#">R</a>
	<a href="#">S</a>
	<a href="#">T</a>
	<a href="#">U</a>
	<a href="#">V</a>
	<a href="#">W</a>
	<a href="#">X</a>
	<a href="#">Y</a>
	<a href="#">Z</a>
</div>

[niralsoni]

Well, as of now it would look fine, but when you are actually adding the items to it, you may face some problems.

Following snippet might help you in achieving same using JavaScript (you can replace a bit of code with jQuery)

<div id="glossary"></div>

<script type="text/javascript">
  function loadGlossary(id) {
    var obj = document.getElementById(id), temp;
    for(var i = 65; i <=90; i++) {
      temp = document.createElement('A');
      temp.innerHTML = '&#'+i;
      temp.href = '#';
      obj.appendChild(temp);
      temp = document.createTextNode(' | ');
      obj.appendChild(temp);
    }
  }
  loadGlossary('glossary');
</script>

[felgall]

One thing to remember is that not everyone has JavaScript. JavaScript should only be used to add features to a web page that make it easier to use - not to provide the basic functioning that the page is there for.

If you want to generate that code instead of having to have it all hard coded then generate it using a server side language. That way you have the benefit of it being program generated AND everyone including those without JavaScript still sees the same HTML.