Jump to content

Objects and elements


chrici
 Share

Recommended Posts

Hi all.I am learning javascript and therefore I create my own javascript experiments to learn it.In my latest experiment I want to append an element as the first child instead of the last.I managed to make it work but I also want to learn how to use objects aswell. This is the triggy part...I know this can be done with JQuery but I want to learn how to do it myself.Hope that you can help me :)This is the code:

<!DOCTYPE HTML><html>	<head>		<title>Javascript test</title>		<script type="text/javascript">			function element(element) {				this.elementType = element;				this.appendAbove = function(newelement,newtext) {										newtxt = document.createTextNode(newtext);					newel = document.createElement(newelement);					newel.appendChild(newtxt);										parent = this.parentNode;					childNodes = parent.childNodes;										for (i=0;i<childNodes.length;i++) {						window['clone'+i] = childNodes[i].cloneNode(true);						parent.removeChild(parent.childNodes[i]);					}										parent.appendChild(newel);										for (x=0;x<i;x++) {						parent.appendChild(window['clone'+x]);					}									};			}		</script>	</head>	<body>		<h1>Test site...</h1>		<section>			<p>This is just a sample text...</p>			<p>This is another sample text...</p>		</section>				<script type="text/javascript">			var str = new element(document.getElementsByTagName('p')[0]);			str.appendAbove('p','Yeah - it works!');		</script>			</body></html>

Link to comment
Share on other sites

The easier technique is to use an element's firstChild property and insertBefore method, as in:

var el = document.getElementById('something');var first = el.firstChild;var newel = document.createElement(newelement);el.insertBefore(newel, first);

Obviously, you can get a reference to el using any technique you like.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Yes - much easier.But it is still not working.I changed the anonymous function to:

function(newelement,newtext) {	newtxt = document.createTextNode(newtext);	newel = document.createElement(newelement);	newel.appendChild(newtxt);	parent = this.parentNode;	first = parent.firstChild;	this.insertBefore(newel, first);};

The console in Chrome gives me the following message:Uncaught TypeError: Cannot read property 'firstChild' of undefinedI guess that there is something wrong with the use of "this"?

Edited by chrici
Link to comment
Share on other sites

When you wrote "I managed to make it work" I assumed I wouldn't have to look too closely at the problem. :)The this keyword always refers to the parent context. In your case, this refers to the element object, which is NOT an element. So this doesn't have a parentNode. The way you've structured the object, you can get a reference to the element's parentNode like this:this.elementType.parentNode(I have to say that elementType is a confusing identifier for a reference to the element itself.)

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...