javascript - iframe をリロードせずにリストを並べ替える

Question

li内のiframeを再ロードせずにリストをソートするにはどうすればよいですか? (appendChild は iframe をリロードします)

<script>
window.onload = function () {
    var my_ul = document.getElementById('my_ul'),
        my_button = document.getElementById('my_button');

    function sort_function() {
        for(var i = 0; i < 5; i++) {
            var list = [1, 2, 3, 4, 5];
            my_ul.appendChild(document.querySelector('[data-sort="' + list[i] + '"]'));
        }
    }

    my_button.onclick = function () {
        sort_function();
    }

}
</script>

<a id=my_button href="#">Sort</a>
<ul id=my_ul>
    <li data-sort=3>3<iframe src="#3"></iframe>
    <li data-sort=2>2<iframe src="#2"></iframe>
    <li data-sort=4>4<iframe src="#4"></iframe>
    <li data-sort=1>1<iframe src="#1"></iframe>
    <li data-sort=5>5<iframe src="#5"></iframe>
</ul>