...
PDA

Appending LI elements to a UL

Mr.
10-03-2011, 08:41 AM
What am I doing wrong here. I'm trying to generate this code into my listOfSquares UL using javascript:
<a href="#" id="square0"><li class="square"></li></a>

This is my complete code:


<html">
<head>
<title>Squares</title>
<style>

li.square {
width: 26px;
height: 26px;
border: 1px solid black;
display: block;
float: left;
margin: 5px;
background-color: #39F;
}

div#squares {
width: 725px;
margin: 50px;
background-color: #CCC;
float: left;
}

div#form {
width: 700px;
text-align: center;
clear: both;
margin: 50px 50px 0 50px;
}

</style>
<script>
<!--
function generateSquare() {

var number = 0;
var squareID = "square" + number;
var container = document.getElementById('listOfSquares');
var linked = document.createElement('a');
linked.setAttribute('href', '#');
linked.setAttribute('id', squareID);

container.insertBefore(linked, container.firstChild);
addToElement(squareID);

}

function addToElement(elementID){

var new_element = document.createElement('li');
new_element.setAttribute('class', 'square');

document.getElementById(elementID).innerHTML=new_element;


}



//-->
</script>
</head>

<div id="form">
<form>
<input type="button" value="Generate Square" onclick="generateSquare()" />
</form>
</div>


<body>
<div id="squares">
<ul id="listOfSquares">
</ul>
</div>


</body>
</html>
rangana
10-03-2011, 09:01 AM
Hope this helps:

function generateSquare() {
var number = 0;
var squareID = "square" + number;
var container = document.getElementById('listOfSquares');
var linked = document.createElement('a');

// set anchor attributes
linked.setAttribute('href', '#');
linked.setAttribute('id', squareID);

// append generated list to our container
container.appendChild(addToElement(linked));
}

function addToElement(el) {
var new_element = document.createElement('li');

new_element.setAttribute('class', 'square');
new_element.appendChild(el); // append previously generated anchor tag to our newly created list

return new_element;
}
Kor
10-03-2011, 09:26 AM
A note:

function generateSquare() {
var number = 0;
var squareID = "square" + number;

That will generate the same id each time, which would be illegal starting from the second firing of the function, as an id must be unique on document.
Mr.
10-03-2011, 03:00 PM
A note:

function generateSquare() {
var number = 0;
var squareID = "square" + number;

That will generate the same id each time, which would be illegal starting from the second firing of the function, as an id must be unique on document.


Yes I know. The id will be changing. I posted this part because I had trouble with it.
Mr.
10-03-2011, 03:02 PM
Hope this helps:

function generateSquare() {
var number = 0;
var squareID = "square" + number;
var container = document.getElementById('listOfSquares');
var linked = document.createElement('a');

// set anchor attributes
linked.setAttribute('href', '#');
linked.setAttribute('id', squareID);

// append generated list to our container
container.appendChild(addToElement(linked));
}

function addToElement(el) {
var new_element = document.createElement('li');

new_element.setAttribute('class', 'square');
new_element.appendChild(el); // append previously generated anchor tag to our newly created list

return new_element;
}


this is not working... the squares are still not links.
rangana
10-03-2011, 03:15 PM
...because the anchor link's node is (technically) empty. If you create a content for that element, it should work, however a quick solution is to add this rule into your CSS:

#listOfSquares a { display: block; width:100%; height: 100%; }
Mr.
10-03-2011, 03:25 PM
Awesome thank you!
Old Pedant
10-03-2011, 08:55 PM
What I don't understand is the first post.

<a href="#" id="square0"><li class="square"></li></a>

That's illegal HTML.

You can't nest <li> inside of <a>.

You *can* nest <a> inside of <li>, thus:

<li class="square"><a href="#" id="square0"></a></li>

So the entire code sequence is backwards. You should create the <li>, append the <a> to it, then append the <li> to the <ul>.

If your backwards HTML works in a given browser, you can't be sure it will work in all browsers.
Old Pedant
10-03-2011, 08:59 PM
Another part of the HTML is illegal:

</head>

<div id="form">
<form>
<input type="button" value="Generate Square" onclick="generateSquare()" />
</form>
</div>


<body>
<div id="squares">
<ul id="listOfSquares">
</ul>
</div>


</body>
</html>

You can't have a <div> that is after the <head> and before the <body>!

Run your HTML through the w3c validator if you don't believe me.
Old Pedant
10-03-2011, 09:05 PM
Example. Using this compact form of your HTML:

<html>
<head><title>title</title></head>
<div>content</div>
<body>
<div>
<ul>
<a href="#"><li></li></a>
</ul>
</div>
</body>
</html>

Running that in the w3c validator at http://validator.w3.org/check produced 4 errors, two of which are irrelevant but then these two:

Error Line 4, Column 6: document type does not allow element "BODY" here
<body>
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

Error Line 7, Column 19: document type does not allow element "LI" here
<a href="#"><li></li></a>
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed)
Old Pedant
10-03-2011, 09:08 PM
Changing the code to this
<html>
<head><title>title</title></head>
<body>
<div>content</div>
<div>
<ul>
<li><a href="#"></a></li>
</ul>
</div>
</body>
</html>

produces only an error about the missing DOCTYPE.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum