By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,297 Members | 1,383 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,297 IT Pros & Developers. It's quick & easy.

innerHTML vs createElement

P: n/a
Given that I need to be able to add a TYPE attribute when I'm using
createElement and it seems to fail in both IE and FF (but not MZ) is it
'safer' to use innerHTML instead?

I can dynamically build the things I need to but I wondering if it will
introduce some new problems that won't surface till I get to testing.

Andrew Poulos
Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Andrew Poulos wrote:
Given that I need to be able to add a TYPE attribute when I'm using
createElement and it seems to fail in both IE and FF (but not MZ)
Really? Then you have discovered a bug that no one else has.
Please post an example of your failing code. Below the signature
is a test case that happily creates inputs of whatever type you
want in both Firefox and IE (provided you enter a valid type to
create, of course).

is it 'safer' to use innerHTML instead?
No. But in some circumstances it is more convenient.
I can dynamically build the things I need to but I wondering if it will
introduce some new problems that won't surface till I get to testing.


Without code or a URL to comment on, it's pointless speculating
what might be wrong.

--
Rob.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>type</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/JavaScript">

// p is the element to add the input to
// t is the type of input to create
function addInput(p,t) {
var oT = document.createElement('INPUT');
oT.type = t;
p.appendChild(oT);
}
</script>
</head><body>
<form action="">
<label for="typeField">Enter an input type to append:
<input type="text" value="button" name="typeField"></label>
<br>
<input type="button" value="Add input" onclick="
addInput(this.form,this.form.typeField.value);
">
</form>
</body>
</html>
Jul 23 '05 #2

P: n/a
RobG wrote:
Andrew Poulos wrote:
Given that I need to be able to add a TYPE attribute when I'm using
createElement and it seems to fail in both IE and FF (but not MZ)


Really? Then you have discovered a bug that no one else has.
Please post an example of your failing code. Below the signature
is a test case that happily creates inputs of whatever type you
want in both Firefox and IE (provided you enter a valid type to
create, of course).


Not so. See Michael Winter's comment (number 10) here:
<url:http://groups.google.com.au/groups?hl=en&lr=&threadm=41c824cb%240%2425815%245a 62ac22%40per-qv1-newsreader-01.iinet.net.au&rnum=1&prev=/groups%3Fq%3D%2522Michael%2BWinter%2522%2B%252Btyp e%2B%252BAndrew%2BPoulos%2522%26hl%3Den%26lr%3D%26 selm%3D41c824cb%25240%252425815%25245a62ac22%2540p er-qv1-newsreader-01.iinet.net.au%26rnum%3D1>

Also if you check an earlier thread titled "Dynamic Object tag works in
MZ but not FF" you'll see some code that fails, when the video is a .AVI
file.
is it 'safer' to use innerHTML instead?


No. But in some circumstances it is more convenient.


I sort of understand but when using DOM 'fails' I don't really have an
alternative.
I can dynamically build the things I need to but I wondering if it
will introduce some new problems that won't surface till I get to
testing.


Without code or a URL to comment on, it's pointless speculating
what might be wrong.


Sorry, I was speaking generally. What I meant was, will innerHTML cause
'new' problems that may not surface until I test on other major OSs and
browsers? (My development machine is currently Win XP SP1 running IE 6
MZ 1.7.5 and FF 1.0. My other machine has Win 98SE and IE 5.)

Andrew Poulos
Jul 23 '05 #3

P: n/a
RobG wrote:
Andrew Poulos wrote:
Given that I need to be able to add a TYPE attribute when I'm using
createElement and it seems to fail in both IE and FF (but not MZ)


Just checked the HTML 4 spec, TYPE attributes are allowed on
the following elements:

a (link), object, param, script, style, input, li, ol, ul and
button.

<URL:http://www.w3.org/TR/html4/index/attributes.html>

My limited example is on <input> types, what element were you
having trouble with?

--
Rob.
Jul 23 '05 #4

P: n/a
RobG wrote:
RobG wrote:
Andrew Poulos wrote:
Given that I need to be able to add a TYPE attribute when I'm using
createElement and it seems to fail in both IE and FF (but not MZ)



Just checked the HTML 4 spec, TYPE attributes are allowed on
the following elements:

a (link), object, param, script, style, input, li, ol, ul and
button.

<URL:http://www.w3.org/TR/html4/index/attributes.html>

My limited example is on <input> types, what element were you
having trouble with?

Putting TYPE attributes on an OBJECT tag fails for me in FF.

Here's a sample that fails in FF but not MZ:

window.onload = function() {
addParam = function(p,n,v) { /* parent, name, value */
var c = document.createElement("param");
c.name = n;
c.value = v;
p.appendChild(c);
}

// parameters
var vidUrl = "media/sample.avi";
var vidTop = 100;
var vidLeft = 150;
var vidWidth = 320;
var vidHeight = 240;
var vidCont = 17; /* add 17px for the QT controller */

// create a DIV to contain the QT OBJECT
var v = document.createElement("div");
v.setAttribute("id", "videoContainer");
v.style.position = "absolute";
v.style.left = "0px";
v.style.top = "0px";
document.body.appendChild(v);

// QT OBJECT for non IE
var m = document.createElement("object");
m.data = vidUrl;
m.type = "video/quicktime";
m.width = vidWidth;
m.height = vidHeight + vidCont;
m.style.position = "absolute";
m.style.left = vidLeft + "px";
m.style.top = vidTop + "px";
addParam(m,"AutoStart","false");
addParam(m,"Controller","true");
v.appendChild(m);
}

- The DOM inspector shows that the TYPE attribute has not been added to
FF while it is in MZ.
- The AVI plays in MZ but FF tells me there's a missing plugin.
- If I write it into the HTML it works in FF
- If I use innerHTML it works in FF
- Moving the adding of the attributes to after the appending of the
OBJECT tag had no apparent effect, ie it still didn't work.

Andrew Poulos
Jul 23 '05 #5

P: n/a
Andrew Poulos wrote:
RobG wrote: [...] Not so. See Michael Winter's comment (number 10) here:
<url:http://groups.google.com.au/groups?hl=en&lr=&threadm=41c824cb%240%2425815%245a 62ac22%40per-qv1-newsreader-01.iinet.net.au&rnum=1&prev=/groups%3Fq%3D%2522Michael%2BWinter%2522%2B%252Btyp e%2B%252BAndrew%2BPoulos%2522%26hl%3Den%26lr%3D%26 selm%3D41c824cb%25240%252425815%25245a62ac22%2540p er-qv1-newsreader-01.iinet.net.au%26rnum%3D1>
Ah, so you are talking about adding type to an object tag.

Mike's words weren't a general comment that adding type
attributes won't work, but was (if I understand correctly)
specifically in regard to adding type to objects:

" 3) Ignore the type attribute. You will *not* be able to
set it. From what I found whilst playing, the type attribute
can only be set from code if the value is of a limited subset
of MIME types, and even then, the permitted types depend on
the other attributes of the element."
Also if you check an earlier thread titled "Dynamic Object tag works in
MZ but not FF" you'll see some code that fails, when the video is a .AVI
file.
Again, thanks for adding context.
is it 'safer' to use innerHTML instead?

No. But in some circumstances it is more convenient.

I sort of understand but when using DOM 'fails' I don't really have an
alternative.


In this specific case, perhaps you don't. If you must add type
and if innerHTML is the only way, do it. To remove doubt,
feature test and if it fails, deal with it.

if (...innerHTML) {
// insert type using innerHTML
} else {
// hope it works without type?
}

The issue with innerHTML is that it is not a W3C standard, it is
a method created by Microsoft and copied by other browsers.

There is a discussion of innerHTML vs DOM here:

<URL:http://www.developer-x.com/content/innerhtml/>

Though I can't vouch for the accuracy or correctness of any of
the contributors' opinions and they are a bit dated (April 2002).

[...] Sorry, I was speaking generally. What I meant was, will innerHTML cause
'new' problems that may not surface until I test on other major OSs and
browsers? (My development machine is currently Win XP SP1 running IE 6
MZ 1.7.5 and FF 1.0. My other machine has Win 98SE and IE 5.)


In general, if you keeps its use minimal, no. However, because
the "standard" is whatever Microsoft have implemented in IE,
there is no way to define what is the correct way for innerHTML
to do anything other than "this is how IE does it".

So the answer is: test, test, test... (but I think you knew
that!!) ;-)

--
Rob
Jul 23 '05 #6

P: n/a
On Thu, 06 Jan 2005 17:27:18 +1000, RobG <rg***@iinet.net.auau> wrote:

[snip]
Mike's words weren't a general comment that adding type
attributes won't work, but was (if I understand correctly)
specifically in regard to adding type to objects:


Correct. Furthermore, the implication was that the type attribute wasn't
needed - the user agent managed without it. Whether that still applies in
this case, I'm not sure. I'll leave that to the OP.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.