IE Workarounds for DOMs setAttribute()

**sniperman** · 07-31-2009, 11:19 AM

Just a quick question. I have started to work with the DOM lately and as with all other scripting, encountered "this command is not supported" errors by good 'ol Internet Explorer...

Code:

	var objInput = document.createElement("input"); 
	document.body.appendChild(objInput);
	var form = document.getElementsByTagName("input"); 
	form.item(0).setAttribute("type", "button");
	form.item(0).setAttribute("onclick", "appendList()");
	form.item(0).setAttribute("value", "press to append");

the colored portion is the code that generates the error. I know there are three methods to call the same code.

Code:

form[0].setAttribute("type", "button");

Code:

form.item(0).type = "button";

Code:

form[0].type = "button";

but none of them seem to be supported by IE. Does anyone know the workarounds??

**vwphillips** · 07-31-2009, 12:50 PM

you can not change the type of an input once it is part of the DOM

if form.item(0) is objInput will work but will still have IE problems if used with forms

Code:

	var objInput = document.createElement("input"); 
	objInput.setAttribute("type", "button");
	objInput.onclick=function(){ appendList(); }
	objInput.setAttribute("value", "press to append");
	document.body.appendChild(objInput);

if you acually want to change the type replace the input with a newly constructed input

BTW the XBrowser function I use to construct form inputs

Code:

function zxcFormField(tag,nme,type){
 var el;
 try {
  el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
 }
 catch (e){
  el=document.createElement(tag);
  if (type) el.type=type;
  el.name=nme;
 }
 return el;
}

**sniperman** · 07-31-2009, 01:53 PM

thanks for the reply

you can not change the type of an input once it is part of the DOM

I actually use a blank template with an onload event in the body tag to call the script so there are no static elements in the BODY. I am creating all the elements on the fly. Is the method correct to create an element (<input> in this case) and set its attributes before I append the form tag to the body?? Seems not for IE.

ps... the input button doesn't come in a form tag, it's flying solo.

btw... that's a great code for automation.

Code:

el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');

Is that ? there supposed to be a + plus

**vwphillips** · 07-31-2009, 02:13 PM

Is that ? there supposed to be a + plus

No, the code has been tested, the ? is a conditional.

**rainarts** · 07-31-2009, 02:18 PM

And also here's another way to work around it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Free Live Help!</title>
<script type="text/javascript">
<!--
var domEntry = function() {
   
var ie = 1;
var form;
var input;
var label;
var div = document.getElementById("main"); // will served as the place holder of the created elements ( form/input ).
   
   (( !div && ( ie = document.all.main )) ? div = ie : ie = 0 ); 

/* 
 - If the browser does understand the 
   getElementById method, 
   then variable ( div ) will 
   preserved its first declared 
   value, otherwise it will be 
   set to hold the document.all 
   method, which is best 
   supported in all modes of IE browsers. 
*/
   if ( "createElement" in document ) { // Check if it does support the createElement in the document. continue >>>

/* OPTIONAL ATTRIBUTES */
   form = document.createElement("form"); // Form Object
   form.action = String( "http://yourDomain/process/fieldentries" ); // You must replace this with a valid action URL.
   form.id = "form1"; // Specify the form id.
   form.method = "post"; // Specify which method to be used upon form submission, it's eithe get/post.
   label = document.createElement("label"); // Creating label tag.
   textLabel = document.createTextNode("Dynamic Field: "); // Creating textual display for the label tag.
   input = document.createElement("input"); // Input Element
   input.type = "text"; // Specify which type of input element will be used before injection.
   input.id = "text1"; // Specify its id.
   input.name = "text1"; // Specify its name.
   input.value = ""; // Specify its value.
   input.size = 30; // Specify its width;

   if ( ie ) { // Best method when injecting ELEMENT in IE Mode.
      label.insertAdjacentElement( "afterBEGIN", input );
      label.insertAdjacentText( "afterBEGIN", "Dynamic Field:" );
      form.insertAdjacentElement( "beforeEND", label );
      div.insertAdjacentElement( "beforeEND", form );
      return;
      } label.appendChild( textLabel );
   label.appendChild( input );
   form.appendChild( label );
   div.appendChild( form );
   return;
   } alert("Please update your browser with its latest patch.", "unsupported feature");
   return false;
};

onload = domEntry;
// -->
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

**sniperman** · 07-31-2009, 02:50 PM

thanks rainarts. i wasn't aware of the document.all failsafe for IE browsers. Should prove very useful when interpreted into my codes.

**vwphillips** · 07-31-2009, 03:24 PM

In case others read this thread must point out

1)

Code:

   if ( ie ) { // Best method when injecting ELEMENT in IE Mode.
      label.insertAdjacentElement( "afterBEGIN", input );
      label.insertAdjacentText( "afterBEGIN", "Dynamic Field:" );
      form.insertAdjacentElement( "beforeEND", label );
      div.insertAdjacentElement( "beforeEND", form );
      return;
      }

while using IEs own methods they have no advantage over standard DOM methods,
(I'm not sure that IE8 still supports them)

2) the code missuses the Lable Tag

3) form elements constructed in this way cannot be submitted in IE (I'm not sure if IE8 has fixed this),
they may using the function I posted in Post #1

4) The element type cannot be changed once it is part of the DOM.

**rainarts** · 07-31-2009, 04:10 PM

@ vic,

IE6- got some minor stability problem when using document.createElement() under this modes. As you can see in my first statement, i have encapsulated the following terms,

Code:

(( !div ( ie = document.all ) ? div = ie : ie = 0 )

meaning it will only work around lower versions' of IE6- that does not understand the getElementById method, so IE7+ will treat the second stance of my statement that uses the appendChild procedure.

IE7+ provides full support for the getElementById, so it will just ignore the 1st line of my statement where i implemented the use of the old insertAdjacent(TYPE), which is meant for the older type of IE.

Try to test it before you make any comments', and you are not the only person here who understand this terms. So dont act that you almost know everything about this language...

**sniperman** · 08-04-2009, 12:30 PM

ok, just a quick question. rainart with your code combined with mine i've been able to produce a DOM-only webpage, which is the aim of this exercise to have no tags within the BODY tags.

however, i need to call a function so once this part of the page is displayed, the DOM portion that created an input button also passes an onclick event handler to the function.

I am sure DOM style does not have elements for event handlers, so how would i implement a javascript call?

Code:

var input;
	var label;

   label = document.createElement("label"); // Creating label tag.
   textLabel = document.createTextNode("Dynamic Field: "); // Creating textual display for the label tag.
   input = document.createElement("input"); // Input Element
   input.type = "button"; // Specify which type of input element will be used before injection.
   input.id = "button"; // Specify its id.
   input.name = "text1"; // Specify its name.
   input.onclick = "javascript:appendList()";
   input.value = "press to append"; // Specify its value.
   input.size = 30; // Specify its width;
   
   label.appendChild( textLabel );
   label.appendChild( input );
   document.body.appendChild( label );

The portion highlighted red is my basic aim. I can already call the function as such...

Code:

document.getElementById("button").onclick = appendList();

but that line of code automatically calls the second portion. I need an onclick handler via DOM methods alone.

**rainarts** · 08-05-2009, 01:40 AM

Hi sniperman,

you can simulate those clicks by assigning anonymous function directly on its line.
e.g.

Code:

var someVar = "div";
input.onclick = ( function() {
   appendList( someVar ); // Do this type of call if you need to pass some arguments over the function being called
} );

but if there's no arguments' involved, then simply apply this format:

Code:

input.onclick = appendList;

and you will be able to make those call...

Thread: IE Workarounds for DOMs setAttribute()

Thread Tools

Search Thread

IE Workarounds for DOMs setAttribute()

The Following User Says Thank You to rainarts For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions