Safari, innerHTML and XHTML

R

RobG

It seems that Safari doesn't implement the innerHTML property for
dynamically created elements in XHTML documents, although it does work
for in-line elements.

It also seems that Safari uses the file extension to detect XHTML
rather that the DOCTYPE. There's a test case below, save it to files
with .xhtml and .html extensions and open in Safari to see the
difference. Tested in 3 on Mac.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML test</title>
<script type="text/javascript">//<![CDATA[
function foo() {
var div = document.createElement('div');
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.innerHTML = 'In-line div worked';
div2.appendChild(div);
div.innerHTML = "Scripted div worked.";
}
window.onload = foo;
// ]]></script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
 
M

Martin Honnen

RobG said:
It seems that Safari doesn't implement the innerHTML property for
dynamically created elements in XHTML documents, although it does work
for in-line elements.
Click to expand...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML test</title>
<script type="text/javascript">//<![CDATA[
function foo() {
var div = document.createElement('div');
Click to expand...

If you want to script XHTML as XML then you should use
var div =
document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
to create an XHTML DIV element.
I have not tested whether that helps with Safari but don't expect a div
element in no namespace to have an innerHTML property. And with an XML
document document.createElement('div') does create a div element in no
namespace.
 
T

Thomas 'PointedEars' Lahn

Martin said:
RobG said:
It seems that Safari doesn't implement the innerHTML property for
dynamically created elements in XHTML documents, although it does work
for in-line elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML test</title>
<script type="text/javascript">//<![CDATA[
function foo() {
var div = document.createElement('div');
Click to expand...

If you want to script XHTML as XML then you should use
var div =
document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
to create an XHTML DIV element.
Click to expand...

That is not quite correct, because `document' would be a reference to an
object that implements the HTMLDocument interface. However, W3C DOM Level 2
HTML, where this interface is defined, only applies to both HTML 4.01 and
XHTML 1.0 documents, not to XHTML _1.1_ documents.
I have not tested whether that helps with Safari but don't expect a div
element in no namespace to have an innerHTML property. And with an XML
document document.createElement('div') does create a div element in no
namespace.
Click to expand...

Non sequitur. An `innerHTML' attribute is not defined by any W3C DOM
interface to date; that property is the result of a proprietary
augmentation, so the namespace really should not matter. However, it is
reasonable that XHTML 1.1 element objects would not have such a property
in Safari; it is `inner*HTML*', after all.

That said, it also depends which version of Safari 3 the OP tested with;
while Safari 3.0.4 was released for Mac OS X v10.5, Safari 3.0.3 is still
beta. In any case, the observed behavior may as well be a bug.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Randy said:
Martin Honnen said the following on 11/11/2007 7:52 AM:
If you want to script XHTML as XML then you should use
var div =
document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
to create an XHTML DIV element.
I have not tested whether that helps with Safari but don't expect a div
element in no namespace to have an innerHTML property. And with an XML
document document.createElement('div') does create a div element in no
namespace.
Click to expand...

Changing it in a file with an .xhtml extension allows it to set the
innerHTML property as desired in the Windows version, [...]
Click to expand...

I would consider that a bug, because one problem with innerHTML is that it
is inner*HTML*. It is not supposed to support element minimization and
namespaces, for example.


PointedEars
 
R

RobG

Martin Honnen said the following on 11/11/2007 7:52 AM:


RobG said:
It seems that Safari doesn't implement the innerHTML property for
dynamically created elements in XHTML documents, although it does work
for in-line elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML test</title>
<script type="text/javascript">//<![CDATA[
function foo() {
var div = document.createElement('div');
Click to expand...
Click to expand...
If you want to script XHTML as XML then you should use
var div =
document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
to create an XHTML DIV element.
I have not tested whether that helps with Safari but don't expect a div
element in no namespace to have an innerHTML property. And with an XML
document document.createElement('div') does create a div element in no
namespace.
Click to expand...

Changing it in a file with an .xhtml extension allows it to set the
innerHTML property as desired in the Windows version, Rob will have to
test the mac version.
Click to expand...

Yes, that works in Safari (3.0.3) on Mac too. I was doing this out of
interest, it is a quirk that someone pointed out to me and I figured
that I'd get an answer here. :)

Thank you to all who replied.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
XHTML - how extend/create ELEMENT body in my DTD? 0
How to save JSON Data to a file using fetch() api? 2
How do I hide the modal after 5 seconds? 4
innerHTML with AJAX problem 12
How do I output this recursive function correctly to a web browser? 2
Help with code 0

Members online

Total: 40 (members: 2, guests: 38)
Robots: 442

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top