How would I go about appending the following code once:

$('.faq_info').append(
                            '<ul>' +
                            '<li>Highlighted code for double html, body, and head tags means its invalid.</li>' +
                            '<li>Check highlighted iframe tags if it effects link placement.</li>' +
                            '<li>Highlighted charset means its not UTF8 or it is a bad charset.</li>' +
                            '<li>Highlighted symbols means that they are effecting the link.</li>' +
                            '<li>Check highlighted ments if it effects the link placement.</li>' +
                            '<li>If client url is highlighted it means something else in the source is causing it to be invalid.</li>' +
                            '<li>Check to see if client url is in the source code.</li>' +
                            '</ul>'
                        );

How would I go about appending the following code once:

$('.faq_info').append(
                            '<ul>' +
                            '<li>Highlighted code for double html, body, and head tags means its invalid.</li>' +
                            '<li>Check highlighted iframe tags if it effects link placement.</li>' +
                            '<li>Highlighted charset means its not UTF8 or it is a bad charset.</li>' +
                            '<li>Highlighted symbols means that they are effecting the link.</li>' +
                            '<li>Check highlighted ments if it effects the link placement.</li>' +
                            '<li>If client url is highlighted it means something else in the source is causing it to be invalid.</li>' +
                            '<li>Check to see if client url is in the source code.</li>' +
                            '</ul>'
                        );

• javascript
• append
• html-lists

• You are appending it once... to every element with class .faq_info... – Andrew Whitaker Commented Feb 15, 2012 at 23:23
• 1 Your selector returns a nodeList, which is then passed to the append() method which applies the append() to every DOM node in that nodeList. To append it only to a specific element, you'll need to use a more specific selector than just a class name. – David Thomas Commented Feb 15, 2012 at 23:24
• 2 @DavidThomas - jQuery doesn't return a NodeList. .getElementsByClassName() is supposed to return a live NodeList, but jQuery definitely doesn't, it returns a jQuery object containing (references to) all matching elements. (But of course you are right that the .append() then adds to every matching element.) – nnnnnn Commented Feb 15, 2012 at 23:38
• Or you could append it only to the first matched element by calling the eq() method before append(): $('.faq_info').eq(0).append('...'). Also, only using a .class selector is way slower than specifying the type of element as well: div.faq_info (for example). – powerbuoy Commented Feb 15, 2012 at 23:47
• @nnnnnn: I stand corrected! And yeah; I pletely forgot about that. And the jQuery object. ...sigh. I should read the API before I try to sound clever in future... =) – David Thomas Commented Feb 15, 2012 at 23:48

1 Answer 1

I just did the following $('div.faq_info').empty().append('whatever string'); and it works. It basically empties whatever is in the div and appends after.