みかづきブログ その3

3ヶ月つづけてみました。

jQueryでセレクトした要素の親要素のinnerHTMLを空にした際の挙動

言語化が難しいのでコードで見てみてください。


HTML

<ol id="order">
    <li>清田</li>
    <li>中村</li>
    <li>角中</li>
    <li>今江</li>
    <li>クルーズ</li>
    <li>根元</li>
    <li>井口</li>
    <li>鈴木</li>
    <li>吉田</li>
</ol>

JavaScript

$(function(win, doc) {
    
    "use strict";
    
    var $order = $("#order"),
        $li    = $("li");
    
    $order.html("");
    
    $order.append($li);

});

DEMO


挙動

Chrome、Safari、Firefox は JS実行前と後で見た目は変わりませんでした。
E10、IE11はliの中身が空になりました。
僕はスナップショット的なChrome等の挙動を期待していたので、cloneをつかって対策することにしました。


対策後のJavaScript

$(function(win, doc) {
    
    "use strict";
    
    var $order = $("#order"),
        $li    = $("li").clone();
    
    $order.html("");
    
    $order.append($li);

});

対策後のDEMO



今回は以上です。