DOM, NODES & HTML 1

[1DMF]

Not sure if this should be in the Javascript forum, but here goes....

I've been playing with adding & deleting ChildNodes to Document nodes by ID.

E.G. set a div tag with an ID, then using appendChild to add a paragraph node, using something like this

var theNewParagraph = document.createElement('p');
var theTextOfTheParagraph = document.createTextNode('Some content.');
theNewParagraph.appendChild(theTextOfTheParagraph);
document.getElementById('someElementId').appendChild(theNewParagraph);

However I have a couple of questions I can't find an answer to,

1. how do I give the new paragraph an ID so I can then issue style attributes to change font colour, size, etc...

2. document.createTextNode seems to place just text in the paragraph, even if the text you supply is HTML. How do you change the content of a paragraph node with HTML and have the browser interpret the code rather than showing the HTML on the screen as text.

All help is appreciated.

Regards,
1DMF

 

[BabyJeffy]

Use this code technique to add an ID to your element:

var theNewParagraph = document.createElement('p');
theNewParagraph.id='myFunkyID';

And this will let you set HTML (instead of text):

var theNewParagraph = document.createElement('p');
theNewParagraph.id='myFunkyID';
document.getElementById('someElementId').appendChild(theNewParagraph);
document.getElementById('myFunkyID').innerHTML = '<b>Bold</b>';

In an ideal world you would add each node... using innerHTML is a shortcut (not standard) that currently does exactly what you ask.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[1DMF]

spot on, thanks Jeff.

looks like some aren't going to like inner.HTML if it isn't W3C, do you know if this is cross browser compatible but just not "Standard" or is it browser specific?

 

[BabyJeffy]

Well, it's pretty much a defacto standard now anyway I guess. It was originally something mooted by Microsoft and incorporated in IE. It's now supported in all major browsers (that I am aware of).

Here are 2 good links on this topic (the second shows the performance differences in using the DOM methods vs innerHTML):

http://www.quirksmode.org/dom/w3c_html.html

http://www.quirksmode.org/dom/innerhtml.html

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[1DMF]

hmm, looks like something MS has done the industry actually adopted, wonders will never cease.

The HTML contained by a tag, as a string.

Originally a Microsoft extension, innerHTML is so useful that all other browsers support it, too.

interesting the outer.HTML test though, once you click, it changes the node content, but then the inner.HTML no longer works.

oh what fun us techies have, i'm sure I should really go get a real job and a life.