comp.lang.javascript archive
Re: Firefox: set innerHTML of select element?
Date: Fri Jun 17 2005 - 15:18:18 CEST
Michael Schuerig wrote:
> I'm trying to change the options of a select element by setting its
> innerHTML. Here's a demo case:
>
> <html>
> <head>
> <script language="javascript" type="text/javascript">
> function addOpts() {
> var s = document.getElementById("s");
> s.innerHTML = '<option>Opt1</option><option>Opt2</option>';
> In Konqueror this works as intended, the select now has two options,
> "Opt1" and "Opt2". In Firefox, unfortunately, the code produces a
> TextNode containing "Opt1Opt2" as the only child of the select element.
You will not have much luck with that approach, I have just tried such a
test case here on Windows with Mozilla 1.7, IE 6 and Opera 8 and none of
them is properly inserting options into the select, as you have already
found out Mozilla inserts a single text node with the text in the option
elements, and IE is inserting a mess of non option elements and text
nodes while Opera inserts empty option elements interleaved with text nodes.
IE's documentation here for innerHTML does not in any way suggest that
innerHTML should not work on select elements:
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/innerhtml.asp>
In general you will be better off using one of the APIs (e.g. DOM 0 and
new Option() or DOM 2 with document.createElement('option') and
appendChild) if you want to create and insert options into a select.
-- Martin Honnen http://JavaScript.FAQTs.com/Received on Tue Oct 18 02:45:29 2005