This JS code works great in Firefox, Opera, but not in Internet Explorer... The problem is this line: el_Label.appendChild(newtext); Code (markup): I open a second window with a image selector by click, the selected images then are added to a form in the first windows. <table class="hairline" style="font-size: 10px"> <tr> <td><img onCLick="javascript:addMedia(this);" id="ID-NUMBER" src="IMAGE" alt="TEXT" width="90" /></td> </tr> <tr> <td><img onCLick="javascript:addMedia(this);" id="ID-NUMBER" src="IMAGE" alt="TEXT" width="90" /></td> </tr> </table> Code (markup): // Add media function addMedia(obj) { if (opener.document.getElementById('media-' + obj.id)) { alert('Media already exists.'); } else { var el_main = opener.document.getElementById('media-container'); // Create list element el_Media = opener.document.createElement('li'); el_Media.id = 'media-' + obj.id; el_Media.className = 'thumbnail'; //el_Media.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode);}; // Create hidden input field el_INPUT = opener.document.createElement('input'); el_INPUT.name = "media[]"; el_INPUT.value = obj.id; el_INPUT.type = "hidden"; // Add mediaThumb el_IMG = opener.document.createElement('div'); el_IMG.id = 'mediaThumb-' + obj.id; el_IMG.className = 'mediaThumb'; el_IMG.style.backgroundImage = "url('" + obj.src + "')"; // Add remove button el_Label = opener.document.createElement('div'); el_Label.id = 'mediaLabel-' + obj.id; el_Label.className = 'mediaLabel'; el_Label.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode);}; var newtext = document.createTextNode("Remover"); // Add it to the document el_Media.appendChild(el_INPUT); el_Media.appendChild(el_IMG); el_Media.appendChild(el_Label); el_Label.appendChild(newtext); el_main.appendChild(el_Media); opener.initMedia(); } } Code (markup): I know there are problems with IE and appendchild... please point me to a workaround even if adding an new external JS or someting. Engel
This works for me in IE and FF: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function addMedia(obj){ if (document.getElementById('media-' + obj.id)) { alert('Media already exists.'); return; } var el_main = document.getElementById('media-container'); el_Media = document.createElement('li'); el_Media.id = 'media-' + obj.id; //el_Media.className = 'thumbnail'; el_main.appendChild(el_Media); el_INPUT = document.createElement('input'); el_INPUT.name = "media[]"; el_INPUT.value = obj.id; el_INPUT.type = "hidden"; el_Media.appendChild(el_INPUT); el_IMG = document.createElement('div'); el_IMG.style.width = "120px"; el_IMG.style.height = "90px"; el_IMG.style.border = "1px solid black"; el_IMG.id = 'mediaThumb-' + obj.id; //el_IMG.className = 'mediaThumb'; el_IMG.style.backgroundImage = "url('" + obj.src + "')"; el_Media.appendChild(el_IMG); el_Label = document.createElement('div'); el_Label.id = 'mediaLabel-' + obj.id; //el_Label.className = 'mediaLabel'; el_Label.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode)} el_Label.style.cursor = "pointer"; el_Label.appendChild(document.createTextNode("Remover")); el_Media.appendChild(el_Label); } </script> <style type="text/css"> body {background-color:#eae3c6;margin-top:60px} </style> </head> <body> <ul id="media-container"></ul> <table class="hairline" style="font-size: 10px"> <tr> <td><img onclick="addMedia(this);" id="ID-NUMBER1" src="1/Cleve1.jpg" alt="TEXT" width="90" /></td> </tr> <tr> <td><img onclick="addMedia(this);" id="ID-NUMBER2" src="1/Cleve2.jpg" alt="TEXT" width="90" /></td> </tr> </table> </body> </html> Code (markup):