PDA

View Full Version : 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.



<!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:


elToAddTo.insertBefore(newEl, elToAddBefore);

If elToAddBefore doesn't exist, newEl will be appended to elToAddTo.

Try this:


<!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:


<!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,,



<!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:


var finaL = createR.tb.insertBefore(roW, createR.tb.firstChild);
fadeIt(finaL);

As far as I know:


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:


createR.tb.insertBefore(roW, createR.tb.firstChild);
fadeIt(roW);

This BTW (though it probably has nothing to do with your current problem):


<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.