473,408 Members | 1,744 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,408 software developers and data experts.

innerHTML vs createElement

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
6 6820
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Sergey Batishchev | last post by:
I need to create element with some content inside. This may be any HTML stuff - tags, text. I do next Set newelem = doc.createElement("span") newelem.innerHTML = "<a...
22
by: necromonger | last post by:
Hi, I've got this code that creates a new new row and cell. I then put some text into the cell with innerHTML - works beautifully with Firefox but fails with IE. I guess IE doesn't support this...
1
by: jhcorey | last post by:
I am doing some maintenance on a js tree control that was done with proprietary IE code. When I click on a node it calls a function which has code similar to that below to expand the tree. "el"...
4
by: RobG | last post by:
I know you aren't supposed to use innerHTML to mess with table structure, but it seems you can't use it just after a table without damaging the containing element. I added a table to a div using...
16
by: Joel Byrd | last post by:
I am having this ridiculous problem of trying to set the innerHTML of a div node. It works in all other browsers, but internet explorer is giving me an "Unknown runtime error". This is actually...
10
by: Jake Barnes | last post by:
This weekend I wanted to learn AJAX, so I set up a little toy page where I could experiment. The idea of this page is that you click in one of the boxes to get some controls, at which point you can...
9
by: Hallvard B Furuseth | last post by:
Why does the FAQ (Q 4.15) recommend innerHTML when so many here say one should use createElement(), replaceChild() etc? Also, why does the "Alternative DynWrite function" at...
3
by: zero0x | last post by:
hi all, i'm trying to create something like window in javascript. there is no problem in firefox, but in microsoft internet explorer i get "Unknown error while working" (this message is in...
6
by: SkyZhao | last post by:
if i use AttachEvent like this,it can't work; eg: var img = document.createElement("img"); img.attachEvent("onclick",alert("test")); var div = document.createElement("div");...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.