#87 √ invalid
Jason Borden

Element.insert issues adding Element in IE

Reported by Jason Borden | May 8th, 2008 @ 11:17 PM

A problem I ran into occurred when trying to insert an option element to a select element in IE. e.g. $('selectelement').insert(new Option('Option')); The issue seems to be present in IE 6 and 7, but not in firefox 2 or konqueror (I haven't tried others). It seems to create a option, but not containing any text in IE. I'll attach a sample html doc that shows the problem. Using prototype-1.6.0.2.js as prototype.js

Comments and changes to this ticket

  • John-David Dalton

    John-David Dalton May 9th, 2008 @ 10:12 PM

    Are you using some other framework or Builder?

    I don't recognize your syntax.

  • Juriy Zaytsev

    Juriy Zaytsev May 9th, 2008 @ 11:18 PM

      • → State changed from “new” to “invalid”

    YAIEB (yet another IE bug)

    This page explains the issue: http://www.propertymaps.com/blog...

    in a nutshell: "appendChild" fails while "add" works, but "add" has its own problems. I'm not sure if we should "fix" this, as there are a couple of alternatives to accomplish this:

    .insert(new Element('option').update('foo'));
    .insert('<option>foo</option>');
    
  • Jason Borden
  • Tobie Langel

    Tobie Langel May 10th, 2008 @ 11:01 AM

    Anyone located the specs for new Options ?

  • James Gurney

    James Gurney July 3rd, 2008 @ 12:37 AM

      • → Tag cleared.

    I'm not sure if this is a bug or not, but I'm running into the same exact problem when attempting to update an element which has been inserted by prototype. This only happens in IE (6 and 7). It works fine in Firefox (2 and 3).

    <form id="testForm">
    <input type="button" id="updateButton" value="Click me">
    </form>
    
    document.observe("dom:loaded", function() {
    	selectElement = new Element('select').update(new Element('option', {'value' : 0}).update('This is the first option'));
    	$('testForm').insert({top: selectElement});
    
    	addNewValue = function() {
    		selectElement.insert(new Element('option',{'value' : '1'}).update('This is a new option'));
    	}
    
    	$('updateButton').observe('click',addNewValue);
    });
    

    I've tried to simplify the test case as much as possible. Creating the select element in the html fixes the problem. Simply performing the insert() outside of the event also fixes the problem.

    This is with prototype 1.6.0

Please Login or create a free account to add a new comment.

You can update this ticket by sending an email to from your email client. (help)

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The Prototype JavaScript library.

Shared Ticket Bins