lemmin Posted September 3, 2008 Share Posted September 3, 2008 Yet another function that FireFox refuses to implement. I expected to be able to get around this by using insertBefore() or appendChild(), but I am using the function on a select object which puts the new element into its collection of options with those functions. Can anyone think of a way to create a new element relative to a select element that will work in FireFox? Thanks. Quote Link to comment Share on other sites More sharing options...
haku Posted September 4, 2008 Share Posted September 4, 2008 You can use insert before on the option that you want to insert it before. Quote Link to comment Share on other sites More sharing options...
lemmin Posted September 4, 2008 Author Share Posted September 4, 2008 I don't want to insert an option, I want to insert an object next to the select drop down list. Thanks, though. Quote Link to comment Share on other sites More sharing options...
lemmin Posted September 4, 2008 Author Share Posted September 4, 2008 I was able to get insertBefore() to work by creating a dummy node after the select for it to reference; however, once again, it only works in IE. At least Firefox actually recognizes this function though. IE will correctly insert another select object after the current select box, but in Firefox, the new select is an empty drop down. This is what IE would output when I tried to use appendChild() (or other related methods that put the new select inside the current select's option collection). Here is the call: function newSubCat(obj){ obj.nextSibling.insertBefore(newSel);//newSel is the created select object. //...} Here is the html: <div id=\"divCats\" STYLE=\"display:inline\"><select name=\"cats[]\" onchange=\"newSubCat(this)\"><option value=0>None</option></select><div id=\"dummy\" style=\"display:inline;width:0px\"></div></div> Any Ideas? Quote Link to comment Share on other sites More sharing options...
rhodesa Posted September 4, 2008 Share Posted September 4, 2008 use the parentNode <select id="foobar"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <script> var node = document.getElementById('foobar'); var newNode = document.createElement('div'); newNode.innerHTML = 'This is a DIV'; node.parentNode.insertBefore(newNode,node); </script> Quote Link to comment Share on other sites More sharing options...
lemmin Posted September 4, 2008 Author Share Posted September 4, 2008 That inserts the object before the current one, I want it after; however, that behaved exactly the same as the newest method I was asking about which makes me think that maybe the new object isn't getting created correctly in Firefox, but it is! I did some debugging to see if the object was what I expected and I can get it to alert all of the options in the new select object, but they don't show when I insert it before or after the current select object! Any ideas why the select object won't display correctly in FF? Quote Link to comment Share on other sites More sharing options...
haku Posted September 4, 2008 Share Posted September 4, 2008 Not without code or a link. There unfortunately is no 'insertAfter' in javascripting, but you can still insert something after. If there are no siblings to the select box, you can use (continuing on from Rhodesa's code) var node = document.getElementById('foobar'); var newNode = document.createElement('div'); newNode.innerHTML = 'This is a DIV'; node.parentNode.appendChild(newNode) Or if there ARE siblings, then you can use this: var node = document.getElementById('foobar'); var newNode = document.createElement('div'); newNode.innerHTML = 'This is a DIV'; node.parentNode.insertBefore(newNode,node.nextSibling) and if you don't know if there will be siblings or not, you can use an if statement to check: if(node.nextSibling) { // use the second script above } else { // use the first script above } Quote Link to comment Share on other sites More sharing options...
lemmin Posted September 4, 2008 Author Share Posted September 4, 2008 Yes, I understand that, thank you. It would seem that the problem has changed more to just the fact that Firefox isn't displaying any options in the newly created select object. I've reduced the code to only what the problem is so you can see: <html> <head> <title>Title</title> <script type="text/javascript"> function newObj(obj) { var subCats = new Array(); subCats[2] = document.createElement('select'); newOp = document.createElement('option'); newOp.value=4; newOp.innerText="Four"; subCats[2].appendChild(newOp); newOp = document.createElement('option'); newOp.value=5; newOp.innerText="Five"; subCats[2].appendChild(newOp); obj.parentNode.appendChild(subCats[2]); } </script> </head> <body> <form> <div> <select onchange="newObj(this)"> <option value=1>One</option> <option value=2>Two</option> <option value=3>Three</option> </select><div></div> </div> </body> </html> Works fine in IE, but FF won't show any options. Thanks for the help. Quote Link to comment Share on other sites More sharing options...
lemmin Posted September 4, 2008 Author Share Posted September 4, 2008 I feel kind of stupid for not realizing why it wasn't displaying, but I did figure it out. Apparently the name of the option had to be set in the innerHTML, not innerText. Thanks for the help, guys. Quote Link to comment Share on other sites More sharing options...
haku Posted September 4, 2008 Share Posted September 4, 2008 Glad you got it worked out! Actually, innerHtml is kind of a hack here. The proper way of doing it is do use this: newOp = document.createElement('option'); newText=document.createTextNode("Five"); newOp.appendChild=newText; It will work either way, but this is the 'correct' way (or so they say). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.