jQuery append( ) invalid argument error in IE 6 ( & IE 7 )

I love jQuery. Everything just seems so simple and easy. But like every other jQuery developer out there, I dread dealing with IE 6. I ran into a very slight issue the other day with some jQuery DOM manipulation methods. It was the append() method to be specific.

What I wanted to do was to move a set of buttons that were wrapped in a <span> tag to another portion of the web page. Here’s a sample of the HTML and jQuery code that didn’t work in IE 6 or IE 7 (but works fine in IE 8, FF 3.6 and chrome 7.0).

<html>

    <script type="text/javascript">
        $(document).ready(function(){
            var myButtons = $('#myTempButtonSection').detach();
            $('#targetButtonsSection .header .buttonSection').append(myButtons);
        });
    </script>

    ...

    <span id="myTempButtonSection">
        <input type="button" ... value=" Add " />
        <input type="button" ... value=" Remove " />
    </span>

    ...

    <div id="targetButtonsSection">
        <div class="header">
            <div class="buttonSection"> </div>
        </div>
    </div>

</html>

IE 6 would return an invalid argument error.

I attempted to search for a page that explained a similar problem. One search result had a solution of using getElementById() calls and .innerHtml() to force IE to behave, but i decided against this as it would turn my one simple target jQuery select into an ugly version of itself.

After a bit of testing I found out that append() works well in IE 6 with a string of HTML code as an argument. I then looked around in the jQuery documentation and found the .html() method.

VOILA, here was the working jQuery code:

$(document).ready(function(){
 var myButtons = $('#myTempButtonSection').detach();

 // voila - fix IE 6 and 7
 if ($.browser.msie &amp;amp;amp;&amp;amp;amp; ($.browser.version=='6.0' || $.browser.version=='7.0'))
  myButtons = myButtons.html();

 $('#targetButtonsSection .header .buttonSection').append(myButtons);
});

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>