PDA

View Full Version : Adding <li> with DOM

p3x
06-14-2005, 10:22 PM
Hi!

I have a <ul> list with about 4 items in it (<li> tags all properly closed with </li>)

The list looks something like this:

<ul>
<li><a href="test.php">test</a><a href="test2.php">test2</a></li>
<li><a href="test.php">test</a><a href="test2.php">test2</a></li>
<li><a href="test.php">test</a><a href="test2.php">test2</a></li>
<li><a href="test.php">test</a><a href="test2.php">test2</a></li>
</ul>

Now I want to add <li> items with DOM. I have to add 1 <li> tag and within that tag, I have to add 2 <a> tags...

I use something like this:


var liTag = document.createElement('li');
liTag.setAttribute('id', liId);
ulTag.appendChild(liTag);

var aTag = document.createElement('a');
aTag.setAttribute('href', 'test.php');
liTag.appendChild(aTag);

aTag.innerHTML = id;

var aaTag = document.createElement('a');
aaTag.setAttribute('href', 'test2.php');
liTag.appendChild(aaTag);

aaTag.innerHTML = ' test2';


But that doesn't seem to work properly,...it seems to underline both hyperlinks , and treat them as one...or something, not sure what is happening, but it is wrong. How could I do this properly?
Kor
06-15-2005, 01:51 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var txt = new Array()
txt[0] =['text00','test00.php','text02','test02.php'];
txt[1] =['text10','test10.php','text12','test12.php'];
txt[2] =['text20','test20.php','text22','test22.php'];
//add here the rest of the new li content
var oLi;
function createElements(){
root = document.getElementsByTagName('ul')[0];
for (var i=0;i<txt.length;i++){
oLi = document.createElement('li');
subRout(txt[i][1],txt[i][0]);
subRout(txt[i][3],txt[i][2]);
root.appendChild(oLi)
}
}
function subRout(url,t){
var oA = document.createElement('a');
oA.setAttribute('href',url);
var oTx =document.createTextNode(t);
oA.appendChild(oTx);
oLi.appendChild(oA);
}
onload = createElements;
</script>
</head>
<body>
<ul>
<li><a href="test.php">test</a><a href="test2.php">test2</a></li>
<li><a href="test.php">test</a><a href="test2.php">test2</a></li>
<li><a href="test.php">test</a><a href="test2.php">test2</a></li>
<li><a href="test.php">test</a><a href="test2.php">test2</a></li>
</ul>
</body>
</html>
brothercake
06-17-2005, 11:15 AM
This strayed completely off topic, not to mention off vibe ... I've pruned out everything that wasn't relevant to the original question
Kor
06-17-2005, 12:30 PM
Good ideea, I have just intended to ask you to do so. Thanks!