<p> createElement UL appendChild LI;appendChild LI;.. </p>

JavaScript
1

I have a basic html with a paragraph defined as follows:


<p id="xmlObj">

</p>

I want to append this paragraph so at the end I have something like this:


<p id="xmlObj">
  <ul>
     <li>data text 1</li>
     <li>data text 2</li>
     .......(keep appending li elements until for loop is done)
  <ul>
</p>

code i’ve created that is not working


var newUL = document.createElement("ul");
var pTag = document.getElementById("xmlObj");
pTag.appendChild(newUL);


	
for (var i = 0; i < totalDataNodes.length; i++) {
    listCreation( 'data text '+i);
}

function listCreation


function listCreation(data){
  //http://developer.apple.com/internet/webcontent/dom2i.html
	var newLI = document.createElement("li");
	var newText = newLI.createTextNode(data);
		
	var pTag = document.getElementById("xmlObj");
	var ulTag = pTag.getElementsByTagName("ul");

//	var referenceLI= ulTag.getElementsByTagName("li").item(listCount);
//	listCount++;

	ulTag.appendChild(newLI);
}

any direction would be appreciated

2

A P element can only contain inline-level content in HTML and XHTML1. What you’re trying to do will cause the markup to be invalid and you’ll never know what a browser will do with it. Use a DIV instead, unless you’re doing generic XML (or XHTML2).

One reason why your code is not working is that you’re calling appendChild() on an Array object (ulTag) returned by getElementsByTagName(). Why not pass a reference to the UL element into the listCreation() function instead?

3

One reason why your code is not working is that you’re calling appendChild() on an Array object (ulTag) returned by getElementsByTagName(). Why not pass a reference to the UL element into the listCreation() function instead?

I added item(0) to the ulTag (should fix array object problem).
As for passing UL element by reference…i don’t think this is needed as only 1 list will ever exist.(many elements <li> tho)

Thanks for letting me know that stuff on only inline elements inside p tags. I’ll change my habits. For this example I think it would serve me best (educationally) to learn how to create and nest multiple elements in the DOM.

code still not working… any ideas


function listCreation(data){
//http://developer.apple.com/internet/webcontent/dom2i.html
 var newLI = document.createElement("li");
 var newText = newLI.createTextNode(data);
		
 var pTag = document.getElementById("xmlObj");
 var ulTag = pTag.getElementsByTagName("ul").item(0);
		
 ulTag.appendChild(newLI);
}

Testing it out here:
http://www.blogsyndrome.com/ajax/1/ajax.html
reads in this data:
http://www.blogsyndrome.com/ajax/1/data.xml

the original example at: http://www.webreference.com/programming/javascript/jf/column12/
did not createElements as doing here…which is probably more useful.

any direction would be appreciated

4

Just incase some later run into appending nested elements… this is how i did it…

From this


<p id="xmlObj">

</p>

to this:


<p id="xmlObj">
  <ul>
     <li>data text 1</li>
     <li>data text 2</li>
     .......(keep appending li elements until for loop is done)
  <ul>
</p>



var pTag = document.getElementById("xmlObj");
var newUL = document.createElement("ol");
pTag.appendChild(newUL);



function listCreation(data){
 //http://developer.apple.com/internet/webcontent/dom2i.html
 var pTag = document.getElementById("xmlObj");
 var ulTag = pTag.getElementsByTagName("ol").item(0);
		
 var newLI = document.createElement("li");
 var newText = document.createTextNode(data);

 newLI.appendChild(newText);
 ulTag.appendChild(newLI);
}

working example: http://www.blogsyndrome.com/ajax/1/ajax.html
based on http://www.webreference.com/programming/javascript/jf/column12/

I basically had to reread the documentation here: http://developer.apple.com/internet/webcontent/dom2i.html