To - jozefkrivan 
I would like to give your question a go.
To recap:
A. All text in an HTML document is contained within textNodes.
Create textNodes separately from the P/H1/SPAN elements.
Meld textNodes and P/H1/SPAN elements together by using appendChild().
B. Then add the span element into the document.
This could be nowhere special or as in the lesson,
Within a link node, before next portion of parent text node using insertBefore().
Copy the following markup into an html file and see how it works. Remove the comments on 4a and
apply comments on 4b to see the difference using an Opera browser.
They differ as to how to modify the DOM around textNodes.You will have to fix the close link ( < / a > ) after the word Opera in the link below. Good Luck!
<html><style>span{color:red}</style><body>
<p>Now is the time for <a id='A' href='www.opera.com'>Opera< / a > Order.</p>
</body><script>
// 1. create a <span> element using "document.createElement('span')"
var spanelem = document.createElement('span');
// 2. create a "textNode" using "document.createTextNode(' New World ')"
var spantext = document.createTextNode(' New World ');
// 3. put the textNode 'inside' the span using appendChild()
spanelem.appendChild(spantext);
// The next step would be to place the text in the DOM as you could do here.
// 4a. add span element into document - no special place
//document.documentElement.appendChild(spanelem);
//But the lesson places it somewhat more specifically.
//It inserts the span element "before the thing after a link."
//<p> Now is the time for <a id='A' href='www.opera.com'> Opera < / a >
[HERE] Order. </p>
// 4b. add span element into document - "within" a link node before next portion of parent text node
lnk=document.getElementById('A');
lnk.parentNode.insertBefore(spanelem, lnk.nextSibling);
</script></html>
Post edited Saturday, 13. June 2009, 21:23:18
Tuesday, 3. February 2009, 06:38:23