appendChild, createElement, setAttribute in IE

JavaScript
1

this works perfectly in firefox - but in internet explorer it just creates the first lable and the input field, although it creates the input field as a regular text field instead of for files. the caption label and text field aren’t created at all. any ideas?

function addphoto() {
	var photos = document.getElementById("photos"); // the element that containts the fields
	
	// create a label for the file field
	var title = photos.appendChild(document.createElement("strong"));
	title.innerHTML = "Photo " + count.value;
	
	// create the file input field
	var file = photos.appendChild(document.createElement("input"));
	file.setAttribute("type", "file");
	file.setAttribute("size", 70);
	file.setAttribute("name", "filPhotos[]");
	
	// create a label for the text field
	var caption = photos.appendChild(document.createElement("strong"));
	caption.innerHTML = "Caption " + count.value;
	
	// create the text field
	var text = photos.appendChild(document.createElement("input"));
	text.setAttribute("type", "text");
	text.setAttribute("name", "txtCaptions[]");
}
2

Hey there,

I had exactly the same problem as you. AppendChild seems to be fine, the problem is setAttribute. Take a look at the suggestion someone else gave me in a post about 3-4 below yours.

Instead of setAttribute use the html tag name.

Ie:

document.setAttribute('id', 'doggy');

becomes

document.id = 'doggy';

Note that for setting the class attribute, you actually use className (I guess since class is a restricted word in Javascript).

3

your suggestion makes sense… and it, again, works perfect in firefox - but it’s still doing the same thing in IE. :-/

here’s what i did differently…

function addphoto() {
	var count = document.getElementById("hidCount");
	
	var photos = document.getElementById("photos");
	
	photos.appendChild(document.createElement("hr"));
	
	var title = photos.appendChild(document.createElement("strong"));
	title.innerHTML = "Photo " + count.value;
	
	var file = photos.appendChild(document.createElement("input"));
	file.type = "file";
	file.size = 70;
	file.name = "filPhotos[]";
	/*file.setAttribute("type", "file");
	file.setAttribute("size", 70);
	file.setAttribute("name", "filPhotos[]");*/
	
	var caption = photos.appendChild(document.createElement("strong"));
	caption.innerHTML = "Caption " + count.value;
	
	var text = photos.appendChild(document.createElement("input"));
	text.type = "text";
	text.name = "txtCaptions[]";
	/*text.setAttribute("type", "text");
	text.setAttribute("name", "txtCaptions[]");*/
	
	document.getElementById("hidCount").value = parseInt(document.getElementById("hidCount").value) + 1;
}
4

and if it helps explain the issue any further, it’s doing this in safari…

in safari, it’s definitely not turning the photo field into a “type=file” field - which makes me just assume the other attributes aren’t being passed along, as well.

in IE only “Photo 2” will appear and a field, but it’s not even a “type=file”, either.

5

NOTICE

:mad:

the ONLY way to create dynamic elements in internet explorer is to do this:

function addphoto() {
	var count = document.getElementById("hidCount");
	
	var photos = document.getElementById("photos");
	
	photos.appendChild(document.createElement("hr"));
	
	var title = photos.appendChild(document.createElement("strong"));
	title.innerHTML = "Photo";
	
	[var file = photos.appendChild(document.createElement("[b]<input type=\\"file\\" name=\\"filPhotos[]\\" size=\\"70\\" />[/b]"));
	
	var caption = photos.appendChild(document.createElement("strong"));
	caption.innerHTML = "Caption";
	
	var text = photos.appendChild(document.createElement("[b]<input type=\\"text\\" name=\\"txtCaptions[]\\" />[/b]"));
}

but this method does NOT work in mozilla browsers

6

my final version, for anyone that’s interested…

function addphoto() {
	var photos = document.getElementById("photos");
	
	photos.appendChild(document.createElement("hr"));
	
	var title = photos.appendChild(document.createElement("strong"));
	title.innerHTML = "Photo";
	
	if (navigator.appName == "Microsoft Internet Explorer") {
		var file = photos.appendChild(document.createElement("<input type=\\"file\\" name=\\"filPhotos[]\\" size=\\"70\\" />"));
	} else {
		var file = photos.appendChild(document.createElement("input"));
		file.setAttribute("type", "file");
		file.setAttribute("size", 70);
		file.setAttribute("name", "filPhotos[]");
	}
	
	var caption = photos.appendChild(document.createElement("strong"));
	caption.innerHTML = "Caption";
	
	if (navigator.appName == "Microsoft Internet Explorer") {
		var text = photos.appendChild(document.createElement("<input type=\\"text\\" name=\\"txtCaptions[]\\" />"));
	} else {
		var text = photos.appendChild(document.createElement("input"));
		text.setAttribute("type", "text");
		text.setAttribute("name", "txtCaptions[]");
	}
}
7

I have dynamically created elements in Firefox and IE using the same script. Check out
http://www.unitorganizer.com/websitebuilder/testing/removeNodeTest.html.

Script works in both IE and Firefox, boxes even look pretty much the same.

Dave

8

yeah…certain elements will work. but it doesn’t appear that the “type” attribute has any say when used in Internet Explorer.

for example, i can run this successfully all day on both firefox and IE…

var file = photos.appendChild(document.createElement(“input”));
file.setAttribute(“value”, “Testing”);

but when i try this…

var file = photos.appendChild(document.createElement(“input”));
file.setAttribute(“type”, “file”);

it only works in firefox :nono: - so i have to resort to this, with IE:

var file = photos.appendChild(document.createElement(“<input type=\“file\” name=\“filPhotos\” size=\“70\” />”));

the name and size attributes can be added as in the same way as above, but i figured while IE was forcing me to declare my input type in createElement i’d go ahead and declare all of 'em.