Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts

    Appending LI elements to a UL

    What am I doing wrong here. I'm trying to generate this code into my listOfSquares UL using javascript:
    Code:
    <a href="#" id="square0"><li class="square"></li></a>
    This is my complete code:

    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>

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Hope this helps:
    Code:
    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;
    }
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    A note:
    Code:
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Kor View Post
    A note:
    Code:
    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.

  • #5
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by rangana View Post
    Hope this helps:
    Code:
    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.

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    ...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:
    Code:
    #listOfSquares a { display: block; width:100%; height: 100%; }
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    Mr. (10-03-2011)

  • #7
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Awesome thank you!

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    What I don't understand is the first post.
    Code:
    <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:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Another part of the HTML is illegal:
    Code:
    </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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Example. Using this compact form of your HTML:
    Code:
    <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)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,567
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Changing the code to this
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •