Results 1 to 6 of 6

Thread: How to insert element before element .. first in -> go down ?

  1. #1
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to insert element before element .. first in -> go down ?

    How to insert element before element .. first in -> go down ?

    My code outputs is that the first output still on top
    i want th output to be what get first go down, what get last go on top.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>project</title>
    </head>
    <body>
    	<script type="text/javascript">
    		<!--
    		var count = 0;   			
    		function createR() {
    			var tbodY = document.getElementById('t');
    
    			var roW = document.createElement('tr');
    			roW.setAttribute('id', count);
    
    			var coL = document.createElement('td');
    			coL.setAttribute('style', 'border-bottom:1px #c2c2c2 dashed;');
    			
    			tbodY.appendChild(roW);
    			roW.appendChild(coL);
    
    			coL.innerHTML = 'Element Number ' + count + ' has been added! <u><a href="#" onclick="destroyR('+count+');">Remove</a></u>';		
    			count++; 
    			setTimeout(createR, 5000);
    		}
    	
    		function destroyR(id) {
    			var tbodY = document.getElementById('t');
    			tbodY.removeChild(document.getElementById(id));
    		}
    		-->
    	</script>
    	<p><a href="#" onclick="createR();">Create</a></p>
    	<table>
    		<tbody id="t">
    		</tbody>
    	</table>
    </body>
    <html> 				
    heres my current code output
    ..............................
    Create
    Element Number 1 has been added! Remove
    Element Number 2 has been added! Remove
    Element Number 3 has been added! Remove
    Element Number 4 has been added! Remove
    Element Number 5 has been added! Remove
    Element Number 6 has been added! Remove

    I want it to be
    ..............................
    Create
    Element Number 6 has been added! Remove
    Element Number 5 has been added! Remove
    Element Number 4 has been added! Remove
    Element Number 3 has been added! Remove
    Element Number 2 has been added! Remove
    Element Number 1 has been added! Remove

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Might as well make a valid page, and no sense messing about with id's if you don't have to. Since you are using the DOM, why mess with non-standard innerHTML? Scripts that can go in the head should (ideally scripts should be external). The setAttribute method should never be used when setting the property directly will work, as it is generally less reliable. To answer your question though, you are looking for the insertBefore() method, which inserts before:

    Code:
    elToAddTo.insertBefore(newEl, elToAddBefore);
    If elToAddBefore doesn't exist, newEl will be appended to elToAddTo.

    Try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>project</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<script type="text/javascript">
    		<!--
    		var count = 0;   			
    		function createR() {
    			var roW = document.createElement('tr');
    
    			var coL = document.createElement('td');
    			coL.style.borderBottom = '1px dashed #c2c2c2';
    
    			var linK = document.createElement('a');
    			linK.style.textDecoration = 'underline';
    			linK.appendChild(document.createTextNode('Remove'));
    			linK.href = '#';
    			linK.onclick = destroyR;
    
    			coL.appendChild(document.createTextNode('Element Number ' + [count++] + ' has been added! '));
    			coL.appendChild(linK);
    			roW.appendChild(coL);
    			createR.tb.insertBefore(roW, createR.tb.firstChild);
    
    			setTimeout(createR, 5000);
    
    		}
    	
    		function destroyR(e) {
    			e = e || window.event;
    			if(e.preventDefault) e.preventDefault();
    			e = e.target || e.srcElement;
    			while(e.nodeName != 'TR') e = e.parentNode;
    			e.parentNode.removeChild(e);
    			return false;
    		}
    
    		window.onload = function(){
    			var t = document.createElement('table');
    			createR.tb = document.createElement('tbody');
    			t.appendChild(createR.tb);
    			document.body.appendChild(t);
    		}
    		-->
    	</script>
    </head>
    <body>
    	<p><a href="#" onclick="createR();return false;">Create</a></p>
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's Pretty cooool!!!!
    thanks man !!!
    =)

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You're welcome, but I was thinking that all that is fairly inefficient. By making just a few compromises, one can still be valid, and do it this way:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>project</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!-- 
    #resource {
    display: none;
    }
    .createdRow td {
    border-bottom: 1px dashed #c2c2c2;
    }
    .createdRow a {
    text-decoration: underline;
    }
     -->
    </style>
    <script type="text/javascript">
    <!--
     			
    function createR() {
    	if(!createR.tb){
    		var t = document.getElementById('resource').cloneNode(true);
    		t.id = '';
    		createR.tb = t.getElementsByTagName('tbody')[0];
    		t.getElementsByTagName('a')[0].onclick = destroyR;
    		document.body.appendChild(t);
    		}
    	else{
    		var roW = document.getElementById('resource').rows[0].cloneNode(true);
    		roW.getElementsByTagName('span')[0].firstChild.nodeValue = ++createR.count;
    		roW.getElementsByTagName('a')[0].onclick = destroyR;
    		createR.tb.insertBefore(roW, createR.tb.firstChild);
    		}
    	setTimeout(createR, 5000);
    }
    
    createR.count = 0;
    
    function destroyR(e) {
    	e = e || window.event;
    	if(e.preventDefault) e.preventDefault();
    	e = e.target || e.srcElement;
    	while(e.nodeName != 'TR') e = e.parentNode;
    	e.parentNode.removeChild(e);
    	return false;
    }
    -->
    </script>
    </head>
    <body>
    	<p><a href="#" onclick="createR();return false;">Create</a></p>
    <table id="resource"><tbody>
    <tr class="createdRow"><td>Element Number <span>0</span> has been added! <a href="#">Remove</a></td></tr>
    </tbody></table>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm really pleased with this code !!!
    I made some changes and added scriptaculous library. to make the stories fade when it come !!!
    it works fine in firefox and chrome ,, but not IE6 !!! take look,,

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>project</title>
    	<script src="js/scriptaculous/lib/prototype.js" type="text/javascript"></script>
    	<script src="js/scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
    	<script type="text/javascript">
    		<!--
    		var count = 0;   			
    		function createR() {
    			createR.tb = document.getElementById('data');
    
    			var roW = document.createElement('tr');
    			roW.setAttribute('id', count);
    
    			var coL = document.createElement('td');
    			coL.style.borderBottom = '1px dashed #c2c2c2';
    
    			var linK = document.createElement('a');
    			linK.style.textDecoration = 'underline';
    			linK.appendChild(document.createTextNode('Remove'));
    			linK.href = '#';
    			linK.onclick = destroyR;
    
    			coL.appendChild(document.createTextNode('Element Number ' + [count++] + ' has been added! '));
    			coL.appendChild(linK);
    			roW.appendChild(coL);
    			
    			//createR.tb.insertBefore(roW, createR.tb.firstChild);
    			var finaL = createR.tb.insertBefore(roW, createR.tb.firstChild);
    			fadeIt(finaL);
    			setTimeout(createR, 1000);
    		}
    	
    		function fadeIt(id) {
    			$(id).appear({ duration: 2.0, from: 0, to: 1 });
    			return false;
    		}
    		 
    		function destroyR(e) {
    			e = e || window.event;
    			if(e.preventDefault) e.preventDefault();
    			e = e.target || e.srcElement;
    			while(e.nodeName != 'TR') e = e.parentNode;
    			e.parentNode.removeChild(e);
    			return false;
    		}
    		-->
    	</script>
    </head>
    <body>
    	<p><a href="#" onclick="createR();return false;">Create</a></p>
    	<table>
    		<tbody id="data">
    		</tbody>
    	</table>
    </body>
    </html>

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not sure what version of prototype and scriptaculous you are using, so cannot really test that code. However, this looks suspect:

    Code:
    var finaL = createR.tb.insertBefore(roW, createR.tb.firstChild);
    fadeIt(finaL);
    As far as I know:

    Code:
    createR.tb.insertBefore(roW, createR.tb.firstChild)
    is not required to return any reference to anything. As a result, finaL could be null or undefined. You might do better to:

    Code:
    createR.tb.insertBefore(roW, createR.tb.firstChild);
    fadeIt(roW);
    This BTW (though it probably has nothing to do with your current problem):

    HTML Code:
    	<table>
    		<tbody id="data">
    		</tbody>
    	</table>
    is invalid HTML. A table must contain at least one tr that contains at least one td or one th.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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