Forums | MacLife

b_dubb · 2009-06-02 1:49 pm

hi

i want to append <li></li> to an <ol> or <ul> ....

Code:

<ul id="listy">

</ul>

i currently have a script that works fantastically in ever browser but Internet Exploder ( 6, 7 , 8 ). here's the js ...

Code:

var listystring = '<li><input type="text" /></li>';
var innerlisty = document.getElementById('listy').innerHTML;
document.getElementById('listy').innerHTML = innerlisty + listystring;

i tried swapping out innerHTML for innerTEXT (because innerHTML is 'proprietary' and MS uses 'innerTEXT' ... why i have no idea).

Code:

var listystring = '<li><input type="text" /></li>';
var innerlisty = document.getElementById('listy').innerTEXT;
document.getElementById('listy').innerTEXT = innerlisty + listystring;

Exploder poops out list items outside of the UL/OL and they appear below the FORM tag. how F'ed up is that?

should i resort to appendChild at this point? or just ban Exploder from my web app? my sites been done for weeks just trying to hack it so that it can be used in Exploder. blurgh.

hope this post makes sense

b

Last edited by b_dubb (2009-06-03 12:56 am)

Basseq · 2009-06-02 9:51 pm

appendChild is probably more semantically correct. Though you may have more luck checking out a JavaScript framework (jQuery, YUI, Prototype, etc.). If you're doing any sort of hardcore JS programming, you'll thank yourself (and me!) later.

b_dubb · 2009-06-03 12:56 am

i thought of using jQuery at the beginning of my project but nothing 'seemed' that complicated. when will i learn?!

oi

b

b_dubb · 2009-06-03 9:46 am

i made ANOTHER mistake. apparently ... innerHTML's future is unclear. the W3C no likey innerHTML. so it would seem appendchild() would be the preferred method here. i'm reading "DOM Scripting" by Jeremy Keith and he compares the appendchild() method to a scalpel and innerHTML to a sledgehammer.

anyone know where i can recycle a used sledgehammer?

b

registered_user · 2009-06-03 7:29 pm

innerHTML will be around a lot longer than the w3 will, that's for sure. It's proprietary Microsoft, that's true, but every other browser uses it too because it's so easy. And, tests indicate that innerHTML is faster than DOM methods anyway.

innerHTML is not a sledgehammer, it's like 3" brush where appendChild() is a pinstripe brush.

I'm a regular user of jquery, and I am familiar with "approved" DOM scripting, and I still use innerHTML because it's a good idea.

b_dubb · 2009-06-04 8:10 pm

in this case i'll take the pin stripe brush thank you wink

Code:

            

function example()
{
    var namestring = 'item';
    namestring += fieldnumber;
    var newinput = document.createElement("input");
    newinput.setAttribute("name",namestring,0);
    newinput.setAttribute("type","text",0);
    newinput.setAttribute("maxlength","255",0);
    newinput.setAttribute("size","60",0);
    var listy = document.createElement("li");            
    listy.appendChild(newinput);
    var inneradd = document.getElementById('listmaker');
    inneradd.appendChild(listy);
}

using appendChild() and setAttribute() solved two problems. 1) cross browser compatibility (haven't tested this yet ... i'm in a coffeehouse and the compy that runs my Windows XP test pc is at home) 2) innerHTML resets EVERYTHING inside the wrapper ( the id="" that contains the innerHTML). since i was appending <li> items that contained <input /> fields to a <ul>/<ol> within a form ... it would be unacceptable to lose user text in the input fields every time someone wanted to add an input field. think about ... you input 15 fields and realize you need to add another but clicking the add field link will obliterate all the text you've typed. how PO'ed would that make you?

innerHTML might be okay for some uses but it actually introduced a serious 'bug' (nuking user input) that needed to be addressed. this way i killed two birds with one stone. and learned a couple of nifty JavaScript

b ( i'll be back later to confirm cross browser compatibility claims )

Last edited by b_dubb (2009-06-04 8:16 pm)

b_dubb · 2009-06-05 2:56 pm

ok so ... no cross browser compatibility. Exploder is pooping out <li><input /> beneath the form and without the proper styling. i think i'm just going to add a script to the backend that will draw a layer with links to every other browser that is standard compliant

MS tried to force me to download MS IE8 to my pc today. the nerve

*update - the site also goes wonky in Opera. hurm

Last edited by b_dubb (2009-06-05 3:07 pm)

registered_user · 2009-06-06 1:16 pm

How's the pinstriper working out for you? tongue

setAttribute() is another long way around invented by intellectuals. you can just do: el.attribute = "foo";

Here's a simple example that does what you want, and you could easily modify it to not use innerHTML. I put that in there so you could see the benefit of it (cleaner, faster code). You could use your *Attribute() methods, but honestly, it's just a lot of work and you get nothing from it other than following the w3 spec... but they jumped the shark, so I wouldn't fret about that.

http://roo.clubhouse54.com/js-form

cheers

b_dubb · 2009-06-07 3:41 pm

i appreciate you taking the time to put that together and post. very helpful. thank you thank you

i'm not married to any method. i just want results (consistent functionality across browsers). if you have a method that works better than mine ... i'm all for it.

when you say that this method is 'faster' do you mean it executes more quickly? or that its faster to code? or both? just wondering

i'm going to rush home and test this in Exploder and see if it works

b

ps - don't mock my pinstriper ... that's just adding insult to injury tongue

Last edited by b_dubb (2009-06-07 3:42 pm)

registered_user · 2009-06-08 6:19 pm

I mean both. innerHTML executes quickly, and the code is smaller and more legible. That example does work in IE7/8, I don't know about 6.

b_dubb · 2009-06-13 3:11 pm

exploder still hates me. and always will.

Code:

<ul id="listy">
</ul>

the .js

Code:

function kaBoom() 
{
    var inneradd = document.getElementById('listy');
    var listy = document.createElement("LI");
    listy.innerHTML = '<input type="text" maxlength="75" size="60" name="list[]" /> <a href="javascript:void(0);" onclick="removeLine(this);" class="remove">Remove</a>';
    inneradd.appendChild(listy);
}

yeah so i'm going to launch my site as a beta and tell everyone the site doesn't support exploder's lack of support.

why doesn't ms just get out of the browser biz? they don't do it well and they just look like idiots while everyone else outshines them

b

UPDATE ** so i'm looking at the DOM in IE using a web dev add on (from MS) ... IE is writing my new elements outside the div / outside the form. WTF

Last edited by b_dubb (2009-06-13 3:55 pm)

b_dubb · 2009-06-16 2:56 am

news flash - i replaced the single quotes in getElementById() with double quotes and suddenly it works fine in IE 7

blurgh

b

Forums | MacLife

#1 2009-06-02 1:49 pm

innerHTML and innerTEXT question

Code:

Code:

Code:

#2 2009-06-02 9:51 pm

Re: innerHTML and innerTEXT question

#3 2009-06-03 12:56 am

Re: innerHTML and innerTEXT question

#4 2009-06-03 9:46 am

Re: innerHTML and innerTEXT question

#5 2009-06-03 7:29 pm

Re: innerHTML and innerTEXT question

#6 2009-06-04 8:10 pm

Re: innerHTML and innerTEXT question

Code:

#7 2009-06-05 2:56 pm

Re: innerHTML and innerTEXT question

#8 2009-06-06 1:16 pm

Re: innerHTML and innerTEXT question

#9 2009-06-07 3:41 pm

Re: innerHTML and innerTEXT question

#10 2009-06-08 6:19 pm

Re: innerHTML and innerTEXT question

#11 2009-06-13 3:11 pm

Re: innerHTML and innerTEXT question

Code:

Code:

#12 2009-06-16 2:56 am

Re: innerHTML and innerTEXT question

Board footer