-5

I was looking to see if anyone here knows how to dynamically generate html out of list items.

Step 1. Here is my HTML list

<ol id="list">
  <li class="class1">a<span class="class2">1</span></li>
  <li class="class1">b<span class="class2">2</span></li>
  <li class="class1">c<span class="class2">3</span></li>
  <li class="class1">d<span class="class2">4</span></li>
  <li class="class1">d<span class="class2">so on</span></li>
</ol>

Step 2. I have no idea where to start, but my goal is to dynamically make something like this

http://www.test.com/?color=1,2,3,4,etc *Note that the order is the same as in the HTML list

Any suggestion would be wonderful. Thanks :)

mrmo123
  • 725
  • 1
  • 8
  • 23
  • Have you tried anything? – Popnoodles May 31 '14 at 00:37
  • I don't really know what to try. Most questions (e.g. http://stackoverflow.com/questions/4772774/how-do-i-create-a-link-using-javascript) talk about how to make a link through javascript. I don't know how to go about using existing data to make a link. Even if I use document.getelementbyid, I wouldn't know what the id would be since they are all the same. – mrmo123 May 31 '14 at 00:44
  • It's not actually very clear what you want to achieve. – Popnoodles May 31 '14 at 00:46
  • I want to take the numbers seen in step 1 and put them into a url (step 2) – mrmo123 May 31 '14 at 00:48

1 Answers1

1

HTML

<ul id="generate">
</ul>

<button id="btn">Make LI tags</button>

Javascript

function create(description)
{
var li = document.createElement('li');
li.id = 'idName';
li.className = 'className';
li.appendChild(document.createTextNode(description));  // description will be the text inside li
document.getElementById('generate').appendChild(li);
}

document.getElementById('btn').addEventListener('click', function()
{
create('text');
}, false);
Hawk
  • 788
  • 1
  • 6
  • 18