MarcMiller
12-08-2006, 07:51 AM
Hi
I have been learning about inserting nodes with JavaScript. I embarked on this pursuit in order to learn how to insert and delete an animated hourglass from my page in order to let the user know the script was working. I thought I had approach that would work according to what I have read thus far. But it doesn't work. I am inserting text as a text node which I want to be interpreted as an HTML tag one should reaches his the browser. This is not happening. I do not know if this approach can succeed. The reason I thought of doing it this way is I have a need to insert styling to in order that I may position this animated hourglass. So I thought in-line styling was a way to go to accomplish my positioning. Well if someone here could tell me how to do this insertion and deletion of my animated gift after looking at my code I would certainly appreciate it. Feel free to tell me about other approaches or linked me to the way of doing this rather than just show me here.
Code below.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>insertBefore Img My Try</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script src="insertBeforeImgMyTry.js" type="text/javascript"></script>
</head>
<body>
<ul >
<li ID="prev">
<a href="#">Green script running</a>
</li>
</ul>
<div id="parentElementHtml">
<div id="referenceElementHtml">AAAAAAAAAAAAAAA<div>
</div>
</body>
</html>
JavaScript
function green () {
this.style.backgroundColor="green";
newSPAN = document.createElement("SPAN");
newText = document.createTextNode("<img id='hourglass' style='position:absolute; top:-34px;' src='ani-busy.gif' alt='hourglass'/>");
var newElement=newSPAN.appendChild(newText);
var referenceElement=document.getElementById("referenceElementHtml");
var parentElement=document.getElementById("parentElementHtml");
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
};
window.onload = function () {
document.getElementById("prev").getElementsByTagName('A')[0].onclick=green;
}
Very sincerely
Marc
I have been learning about inserting nodes with JavaScript. I embarked on this pursuit in order to learn how to insert and delete an animated hourglass from my page in order to let the user know the script was working. I thought I had approach that would work according to what I have read thus far. But it doesn't work. I am inserting text as a text node which I want to be interpreted as an HTML tag one should reaches his the browser. This is not happening. I do not know if this approach can succeed. The reason I thought of doing it this way is I have a need to insert styling to in order that I may position this animated hourglass. So I thought in-line styling was a way to go to accomplish my positioning. Well if someone here could tell me how to do this insertion and deletion of my animated gift after looking at my code I would certainly appreciate it. Feel free to tell me about other approaches or linked me to the way of doing this rather than just show me here.
Code below.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>insertBefore Img My Try</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script src="insertBeforeImgMyTry.js" type="text/javascript"></script>
</head>
<body>
<ul >
<li ID="prev">
<a href="#">Green script running</a>
</li>
</ul>
<div id="parentElementHtml">
<div id="referenceElementHtml">AAAAAAAAAAAAAAA<div>
</div>
</body>
</html>
JavaScript
function green () {
this.style.backgroundColor="green";
newSPAN = document.createElement("SPAN");
newText = document.createTextNode("<img id='hourglass' style='position:absolute; top:-34px;' src='ani-busy.gif' alt='hourglass'/>");
var newElement=newSPAN.appendChild(newText);
var referenceElement=document.getElementById("referenceElementHtml");
var parentElement=document.getElementById("parentElementHtml");
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
};
window.onload = function () {
document.getElementById("prev").getElementsByTagName('A')[0].onclick=green;
}
Very sincerely
Marc