Mozilla DOM Element

[bennett.matthew]

Hello all,

This is probably an elementary (no pun intended) question, but I've
spent all afternoon on it and it's driving me crazy.

I have a function which dynamically adds to a table. It receives a
variable which basically encapsulates this:

<div id="tableid">
<tr>
<td>col1</td>
<td>col2</td>
...
</tr>
...
</div>

It's worth nothing that the incoming variable is a product of XSLT
transformation, so I think it's technically an XML DOM element
(although I'm not too sure on the difference between the XML DOM and
the HTML DOM).

On the incoming variable, I do getElementsByTagName("tr") and -("td")
to get NodeLists of the rows and columns respectively. To insert them
into the table, I create new tr and td elements, then copy the value
over, like this:

//stuff to get a column
trs = getElementsByTagName("tr");
tds = trs[i].getElementsByTagName("td");
thiscol = tds[j];

//stuff to copy the column value
new_tr = document.createElement("tr");
new_td = document.createElement("td");
new_td.innerHTML = thiscol.xml

The .xml part is a Microsoft creation, so the only works in Internet
Explorer. In anything else the column value is rendered as 'undefined'.

I'm trying to make things work in Mozilla too, but an Element node
(thiscol.nodeType gives me '1') doesn't have nodeValue implemented.
InnerHTML and OuterHTML are not implemented either.

How on earth are you supposed to extract a value from an XML node if
nodeValue is not defined? Am I going about things in the wrong way?

Many thanks in advance,
Matt.

[Ian Collins]

be*************@gmail.com wrote:

Hello all,

This is probably an elementary (no pun intended) question, but I've
spent all afternoon on it and it's driving me crazy.

I have a function which dynamically adds to a table. It receives a
variable which basically encapsulates this:

<div id="tableid">
<tr>

tr isn't a child of div, it belongs in a table, under a thead, tbody or
tfoot.

>
//stuff to get a column
trs = getElementsByTagName("tr");
tds = trs[i].getElementsByTagName("td");
thiscol = tds[j];

If you use a table as you should, you can use rows[].cells[].

//stuff to copy the column value
new_tr = document.createElement("tr");
new_td = document.createElement("td");
new_td.innerHTML = thiscol.xml

If you use a table as you should, you can use insertRow() and insertCell().

The .xml part is a Microsoft creation, so the only works in Internet
Explorer. In anything else the column value is rendered as 'undefined'.

I'm trying to make things work in Mozilla too, but an Element node
(thiscol.nodeType gives me '1') doesn't have nodeValue implemented.
InnerHTML and OuterHTML are not implemented either.

Yes, they all are. So what you have isn't an Element.

How on earth are you supposed to extract a value from an XML node if
nodeValue is not defined? Am I going about things in the wrong way?

It is.

--
Ian Collins.

[bennett.matthew]

Ian,

Thanks for the fast reply.

I think my problem stems from the fact that the element that contains
the new rows is generated by XSLT - it's XML and not in DOM form.

I've tried to follow your advice, replaced the <divwith a <table>
tag, and treated the incoming element as a table. But I get exceptions
when I call table.rows[i] etc. presumably because the element is not a
table - it's an XML node.

Calling nodeType on the incoming element when it enters the function,
you get 9 (document), and calling it on
incoming_element.documentElement, you get 1 again.

http://mozref.com/reference/objects/Node is the page that has confused
me about nodeValue - "Only Attr, CDATASection, Comment,
ProcessingInstruction, and Text objects can contain a value in this
property". Am I missing something here? I'm pretty confident my
original approach would work, if I could only find a way to see the
value inside the XML node.

Failing that, I'm guessing that I need to do some transformation
between XML and DOM representations. Does anyone have any advice?

Many thanks,
Matt.
Ian Collins wrote:

be*************@gmail.com wrote:

Hello all,

This is probably an elementary (no pun intended) question, but I've
spent all afternoon on it and it's driving me crazy.

I have a function which dynamically adds to a table. It receives a
variable which basically encapsulates this:

<div id="tableid">
<tr>

tr isn't a child of div, it belongs in a table, under a thead, tbody or
tfoot.

//stuff to get a column
trs = getElementsByTagName("tr");
tds = trs[i].getElementsByTagName("td");
thiscol = tds[j];

If you use a table as you should, you can use rows[].cells[].

//stuff to copy the column value
new_tr = document.createElement("tr");
new_td = document.createElement("td");
new_td.innerHTML = thiscol.xml

If you use a table as you should, you can use insertRow() and insertCell().

The .xml part is a Microsoft creation, so the only works in Internet
Explorer. In anything else the column value is rendered as 'undefined'.

I'm trying to make things work in Mozilla too, but an Element node
(thiscol.nodeType gives me '1') doesn't have nodeValue implemented.
InnerHTML and OuterHTML are not implemented either.

Yes, they all are. So what you have isn't an Element.

How on earth are you supposed to extract a value from an XML node if
nodeValue is not defined? Am I going about things in the wrong way?

It is.

--
Ian Collins.

[Ian Collins]

be*************@gmail.com wrote:

Please don't top post, your reply should come after the (trimmed) text
of the message you are replying to, or interleaved with it.

Ian Collins wrote:

>>be*************@gmail.com wrote:

>>>Hello all,

This is probably an elementary (no pun intended) question, but I've
spent all afternoon on it and it's driving me crazy.

I have a function which dynamically adds to a table. It receives a
variable which basically encapsulates this:

<div id="tableid">
<tr>

tr isn't a child of div, it belongs in a table, under a thead, tbody or
tfoot.

>>>//stuff to get a column
trs = getElementsByTagName("tr");
tds = trs[i].getElementsByTagName("td");
thiscol = tds[j];

If you use a table as you should, you can use rows[].cells[].

>>>//stuff to copy the column value
new_tr = document.createElement("tr");
new_td = document.createElement("td");
new_td.innerHTML = thiscol.xml

If you use a table as you should, you can use insertRow() and insertCell().

>>>The .xml part is a Microsoft creation, so the only works in Internet
Explorer. In anything else the column value is rendered as 'undefined'.

I'm trying to make things work in Mozilla too, but an Element node
(thiscol.nodeType gives me '1') doesn't have nodeValue implemented.
InnerHTML and OuterHTML are not implemented either.

Yes, they all are. So what you have isn't an Element.

>>>How on earth are you supposed to extract a value from an XML node if
nodeValue is not defined? Am I going about things in the wrong way?

It is.

Ian,

Thanks for the fast reply.

I think my problem stems from the fact that the element that contains
the new rows is generated by XSLT - it's XML and not in DOM form.

Very likely, so you have an (X)XML document parsed into a vanilla DOM,
not an HTML one.

I've tried to follow your advice, replaced the <divwith a <table>
tag, and treated the incoming element as a table. But I get exceptions
when I call table.rows[i] etc. presumably because the element is not a
table - it's an XML node.

Because you document isn't (X)HTML, you will have to create HTML DOM
elements form it, which is a pain. It might be easier to get your XML
as a string and use innerHTML to add it to your document.

Calling nodeType on the incoming element when it enters the function,
you get 9 (document), and calling it on
incoming_element.documentElement, you get 1 again.

That's correct, 1 is an element node.

http://mozref.com/reference/objects/Node is the page that has confused
me about nodeValue - "Only Attr, CDATASection, Comment,
ProcessingInstruction, and Text objects can contain a value in this
property". Am I missing something here? I'm pretty confident my
original approach would work, if I could only find a way to see the
value inside the XML node.

No, I might have confused you. Only that subset of object have text
content (nodeValue). Everything else has child nodes.

Failing that, I'm guessing that I need to do some transformation
between XML and DOM representations. Does anyone have any advice?

As I said above, you might be better off with text and innerHTML.
Mozilla will let you insert an XML fragment into the current DOM, but IE
will not.

--
Ian Collins.

[Martin Honnen]

be*************@gmail.com wrote:

I think my problem stems from the fact that the element that contains
the new rows is generated by XSLT - it's XML and not in DOM form.

But if you have an XSLT stylesheet that generates HTML (e.g. xsl:output
method="html") then Mozilla's XSLT processor creates HTML element nodes
(for elements with HTML tag names like e.g. div, p in no namespace).
With Mozilla's XSLT API you should probably use transformToFragment with
the target document passed in and make sure your stylesheet generates
HTML. Then you can simply take the fragment node returned and insert it
as needed into the HTML document you have. No need to work with innerHTML.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[bennett.matthew]

Sorry about the top posting.

Thanks to both of you for the advice, I understand the problem now.

Cheers,
Matt.

[Ian Collins]

be*************@gmail.com wrote:

Sorry about the top posting.

Thanks to both of you for the advice, I understand the problem now.

For future reference, do you have a solution?

--
Ian Collins.

[bennett.matthew]

Ian Collins wrote:

For future reference, do you have a solution?

Not quite yet. I'm using Sarissa so I can emulate Mozilla's XSLT API in
internet explorer, so I think Martin's approach will work best for me.

When you use transformToFragment, what can you use as the sourceDoc? I
understand it has to be a document of the same type (ie XML/HTML) that
the fragment is being transformed into.

In this case, it will be an HTML document. Do I have to supply the
containing webpage as the sourceDoc, and if so where does the fragment
get added? Otherwise, how do I create an empty HTML document, and then
insert it into my webpage later?

Many thanks,
Matt.

[bennett.matthew]

I have found at least a temporary solution to this problem.

I tried both your approaches, with little success:

Martin - I created an empty DOM document (with Sarissa) and then tried
to transformFragment into it, but it didn't come out as an HTML DOM
Document. Actually nodeType gave 11 (document-fragment). I also tried
using the keyword 'document' as the sourceDoc, but met with another
error so I quit.

Ian - the innerHTML looked like it was going to work, but I couldn't
get the information I needed as a string. The problem is that I was
adding multiple <trelements to my table - and Sarissa's
stringSerializer requires a valid incoming XML file - i.e. a single
root node. Obviously I could have used an arbitrary root node and then
cropped the string, but it wouldn't have been very neat.

Instead, I reverted to my original problem: getting Mozilla to
recognise the xml within a DOM element node. The answer was simple: use
Sarissa's (cross-browser) stringSerializer function to parse the xml
into a string. I then add it to the document using innerHTML.

So there is at least one solution to this problem. My question now is,
is it the most elegant? There's a lot of contention out there about
innerHTML. According to the standards, how *should* I have solved this
problem?

Thanks for all the advice,
Matt.