getting tag content?, Javascript Options

[asmith]

Hey guys

How do you store a tag content into js variable?

for example :

CODE

<p>Content</p>

How do you get "content" ?

[pandy]

Maybe this helps.
http://www.onlinetools.org/articles/unobtr...t/chapter2.html

I think there are several ways, but something like this seems to work.

HTML

<p id="foo">Hello!</p>

CODE

var bar = document.getElementById('foo').firstChild.data;
alert(bar);

[Christian J]

A simple way is to use innerHTML, which returns all the content as a string:

CODE

<p id="p">Lorem <em class="test">ipsum</em> <br>dolor</p>

<textarea id="t" cols="50" rows="20"></textarea>

<script type="text/javascript">
var p=document.getElementById('p');
var t=document.getElementById('t');
t.value=p.innerHTML;
</script>

innerHTML is non-standard, but suported by all(?) newer browsers. Different browsers will output different innerHTML syntax regardless of how the actual HTML source is written (like upper/lower case, quotes around attribute values, no XHTML slashes in empty elements).

The rest of this post doesn't apply to innerHTML:

CODE

var bar = document.getElementById('foo').firstChild.data;

You can also use nodeValue instead of data, AFAIK they are the same.

When using the DOM you must be sure that the element's firstChild is the only child. If the element contains more nodes, like

CODE

<p id="foo">Hello <em>world!</em></p>

or

CODE

<p id="foo">Hello <!--cruel--> world!</p>

(SGML comments are nodes too) firstChild will return only "Hello ". To get all unknown childNodes you must loop through them, going one level deeper for each element that has child nodes. Here's an example: http://www.permadi.com/tutorial/domTree/

If the firstChild is not a text node:

CODE

<p id="foo"><em>Hello</em> world!</p>

the data/nodeValue returns "undefined", since the EM element has no data/nodeValue. You can test that with

CODE

if(document.getElementById('foo').firstChild.nodeType==3)

where "3" means it's a text node ("8" means comment node).

Finally, all(?) today's browsers except MSIE regard code formatting as text nodes, so here:

CODE

<p id="foo">
<em>Hello</em>
</p>

all but MSIE will count the newline before EM as the firstChild: http://developer.mozilla.org/En/Whitespace_in_the_DOM

[asmith]

Really really thanks for the information. I learned something new and I wrote my first js script all by myself, Was so much fun! xD

I have this line :

CODE

document.getElementById('take1').firstChild.data += '<br />test';

Meaning whatever that content is, add a new line and stick "test" to the end of it. it works, except It show "<br />" on the page except parsing it as html. What's wrong with it?

2.I tried to view page source to see what characters are "<br />", But nothing there, How can i see the output changed by JS ?

3. How can i see if my js code has errors? like error in php tell you which line and why ...

[Christian J]

it works, except It show "<br />" on the page except parsing it as html. What's wrong with it?

The above would've worked with innerHTML, but with the DOM you must create element nodes:

CODE

var take1=document.getElementById('take1');
var new_tag=document.createElement('br');

// Place the BR element last in "take1":
take1.appendChild(new_tag);

// You also need a new text node after the BR:
var new_text=document.createTextNode('test');
take1.appendChild(new_text);

"take1" now contains three child nodes: the original text node ("foo"),
a new BR element node, and a new text node with the data/nodeValue "test":

CODE

<div id="take1">foo<br>test</div>

Here's a tutorial on how to make a whole HTML table: http://developer.mozilla.org/En/Traversing..._DOM_Interfaces

2.I tried to view page source to see what characters are "<br />", But nothing there, How can i see the output changed by JS ?

I use innerHTML for that (with the syntax caveats mentioned earlier). There are also some browser addons that show rendered source.

3. How can i see if my js code has errors? like error in php tell you which line and why ...

Browsers have error consoles of varying quality, and found in different places. Probably there are external browser addons for this too.

[asmith]

Thanks, learned it

hmmm, is this different for "docuent.write" ?

in this page :
http://www.tizag.com/javascriptT/javascriptoperators.php

it has written :

CODE

var two = 2
var ten = 10
var linebreak = "<br />"

document.write("two plus ten = ")
var result = two + ten
document.write(result)
document.write(linebreak)

why here "<br />" is working fine?

[Christian J]

document.write and innerHTML create strings, similar to a server-side script, so with them you can write HTML directly.

In the DOM I believe an HTML document is regarded as a tree of nodes, and you can only create strings as node data (for text nodes, attribute values, element names etc).