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

**amrtami** · 11-18-2008, 12:16 PM

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

**jscheuer1** · 11-18-2008, 03:48 PM

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>

**amrtami** · 11-18-2008, 04:02 PM

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

**jscheuer1** · 11-18-2008, 04:55 PM

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>

**amrtami** · 11-18-2008, 09:24 PM

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>

**jscheuer1** · 11-19-2008, 04:02 AM

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.

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions