chrici Posted June 5, 2011 Share Posted June 5, 2011 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 More sharing options...
jeffman Posted June 5, 2011 Share Posted June 5, 2011 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. Link to comment Share on other sites More sharing options...
chrici Posted June 5, 2011 Author Share Posted June 5, 2011 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"? Link to comment Share on other sites More sharing options...
jeffman Posted June 5, 2011 Share Posted June 5, 2011 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.) Link to comment Share on other sites More sharing options...
chrici Posted June 5, 2011 Author Share Posted June 5, 2011 Yes - now it is working.And thank you very much!! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.