элемент / объект равен NULL в Internet Explorer

Question

var append = $('<li class="ui-widget-content" id="list-'+num+'">'+content+'</li>');
console.log( append ); // LOG: [object Object]
console.log( append.html() ); // LOG: null

IE 8 создает var append как объект, но его html-контент равен null. Прекрасно работает в других браузерах. Я не могу понять, в чем здесь проблема. Есть идеи?

// редактировать //

var content - это HTML-строка ответа ajax, например

<div class="item status-0 filiale-2" id="item-18">
            <div class="ui-corner-all date ui-state-active">
            <div class="filiale">D&uuml;ren</div>
            <div class="left date-add">22.06.2011 15:02:24 Uhr</div>
            <div class="clear"></div>
            </div>
                <div class="clear"></div>
            </div>
            <div>
            <form id="form-order-18" action=""">
                <input type="hidden" id="list-id" name="id" value="18" >
                <div class="relative left artikel"><input type="text" class="text ui-corner-all ui-widget-content autocomplete" id="list-artikel-18" name="artikel" value="79949 | ASUS Eee PC 1001PXD-BLK028S 25.65cm/N455/1" /></div>
                <div class="relative left qty">    <input type="text" class="text ui-corner-all ui-widget-content" id="list-qty-18" name="qty" value="1" /></div>
                <div class="relative left comment"><input type="text" class="text ui-corner-all ui-widget-content" id="list-comment-18" name="comment" value="kunde wünscht ungeöffnetes" /></div>
                <div class="relative left">
                <button type="button" class="item-edit" opt:icon="ui-icon-disk" opt:text="false">&Auml;nderungen speichern</button>
                <button type="button" class="item-del" item:id="18" opt:icon="ui-icon-trash" opt:text="false">Bestellung L&ouml;schen</button>
                </div>
            </form>
            </div>
            <div>
            <form id="form-sendorder-18">
                <input type="hidden" name="action" value="sendorder" />
                <input type="hidden" id="order-id" name="id" value="18" >
                <div class="relative left salesman">
                <label for="order-artikel-18" class="ui-state-disabled text">Händler</label>
                <input type="text" class="text ui-corner-all ui-widget-content acsalesman inlinefield" id="order-artikel-18" name="salesman" value="" />
                </div>
                <div class="relative left dateexpected">
                <label for="order-list-date-expected-18" class="ui-state-disabled text">erwartet am</label>
                <input type="text" class="text ui-corner-all ui-widget-content inlinefield datepicker" id="order-list-date-expected-18" name="date_expected" value="" />
                </div>
                <div class="relative left comment">
                <label for="order-comment-18" class="ui-state-disabled text">Kommentar für Filiale</label>
                <input type="text" class="text ui-corner-all ui-widget-content inlinefield" id="order-comment-18" name="comment_o" value="" /></div>
                <div class="relative left">
                <button type="button" class="item-order" opt:icon="ui-icon-cart" opt:text="false" item:id="18">Ware Bestellt</button>
                </div>
            </form>
            </div>
            <div class="clear"></div>

эта строка является проблемой. Если я установлю HTML без этой строки, он будет работать.

var append = $('<li class="ui-widget-content" id="list-'+num+'">foobar</li>');
console.log( append ); // LOG: [object Object]
console.log( append.html() ); // LOG: foobar

Спасибо и всего наилучшего,

Alex

Answer 1

.html () в jQuery является эквивалентом innerHTML (), что означает, что в обычных браузерах (например, FF, Chrome) все должно быть правильно, в то время как в IE вам придется использовать свойство outerHTML.

Я бы попробовал использовать плагин externalHTML jQuery, чтобы получить элемент полностью: http://yelotofu.com/2008/08/jquery-outerhtml/

Надеюсь, это поможет:)