Situation : You want to insert some simple content into a DOM element. Since you happen to be a javascript n00b like me who always forget how to do it, and you don't want to use a 60 kb prototype.js for your 10 javascript lines project, you thought it would be useful to write down once for all how this is done. Right ? Hmmkey.
HTML start :
Say the HTML we have is something like the following :
HTML:
-
<div>hello <span id="myspan">mister</span> Ozh</div>
Create new content with Javascript :
You will either create a new HTML element (a DIV, a SPAN etc) and its content (innerHTML), or raw text :
JavaScript:
-
var target = document.getElementById('myspan');
-
-
// method 1 : create an HTML element
-
var content = document.createElement('span');
-
content.innerHTML = 'I am an <em>inserted</em> SPAN';
-
-
// method 2 : create raw text with no markup
-
var newtext = document.createTextNode('INSERTED');
Insert Before :
JavaScript:
-
target.parentNode.insertBefore(content, target);
HTML result :
HTML:
-
hello INSERTED<span id="myspan">mister</span> Ozh
Insert at the Top :
JavaScript:
-
target.insertBefore(content, target.firstChild);
HTML result :
HTML:
-
hello <span id="myspan">INSERTEDmister</span> Ozh
Insert at the Bottom :
JavaScript:
-
target.appendChild(content);
HTML result :
HTML:
-
hello <span id="myspan">misterINSERTED</span> Ozh
Insert After :
JavaScript:
-
target.parentNode.insertBefore(content, target.nextSibling);
HTML result :
HTML:
-
hello <span id="myspan">mister</span>INSERTED Ozh
prototype functions
For reference, using javascript framework prototype, these 4 content insertion can be achieved with the following :
JavaScript:
-
new Insertion.Before(target, content);
-
new Insertion.Top(target, content);
-
new Insertion.Bottom(target, content);
-
new Insertion.After(target, content);
thought, on 20/Jun/06 at 6:07 am # :
First Post!
thanks for that - /me iz teh javascript n00b.
replied, on 06/Nov/06 at 4:07 am # :
thiz post rlz
replied, on 24/Jul/08 at 11:47 am # :
As did it move too far. jimi hendrix sex tape I whispered. He.