Не дойдет никак что c js

pilot

Почему кнопки 1 и 3 (init1 и init3) рисуют "коврик", а кнопка 2 (init2) — кракозябру?
В FF и Opera — кракозябры разные.

<html>

    <head>

        <title>Test</title>

        <style type="text/css">

div.carpet {

    width: 600;

    height: 90%;

    position: absolute;

    }



div.square {

    width: 4px;

    height: 2px;

    border: 1px solid blue;

    float: left;

    }

        </style>

        <script type="text/javascript">



function init1{

    // 1800 

    var square = document.getElementById('sq');

    var node = null;

    var br = document.getElementById('br');

    var brsq = null;

    var carpet = document.getElementById('carpet');



    for(var i=0;i<50;i++){

        for(var j=0;j<100;j++){

            node = square.cloneNode(false);

            node.setAttribute('id','square'+i+'_'+j);

            carpet.appendChild(node);

            }

        }

    }



function init2{

    // 300 

    var carpet = document.getElementById('carpet');

    var str = "";



    for(var i=0;i<50;i++){

        for(var j=0;j<100;j++){

            str+='<div class="square" id="square'+i+'_'+j+'"/>';

            }

        }

    carpet.innerHTML = str;

    //alert(str); //FF 1.0.5 crash

    }



function init3{

    // 600 

    var square = document.getElementById('sq').cloneNode(false);

    var node = null;

    var br = document.getElementById('br');

    var brsq = null;

    var carpet = document.getElementById('carpet').cloneNode(false);



    for(var i=0;i<50;i++){

        for(var j=0;j<100;j++){

            node = square.cloneNode(false);

            node.setAttribute('id','square'+i+'_'+j);

            carpet.appendChild(node);

            }

        }

    var carp = document.getElementById('carpet');

    carp.parentNode.replaceChild(carpet,carp);

    }

        </script>

    </head>

<body>

    <form>

        <input value="1" type="button" onclick="javascript:var time = new Date.getTime;init1;alert(new Date.getTime-time);"/>

        <input value="2" type="button" onclick="javascript:var time = new Date.getTime;init2;alert(new Date.getTime-time);"/>

        <input value="3" type="button" onclick="javascript:var time = new Date.getTime;init3;alert(new Date.getTime-time);"/>

    </form>

    <div class="carpet" id="carpet"/>

    <div class="square" id="sq"/>

    <br id="br"/> 

</body>

</html>

PS по скорости опера вроде рулит.

skvoria

str+='<div class="square" id="square'+i+'_'+j+'"/>';

Потому что див надо закрывать: str+='<div class="square" id="square'+i+'_'+j+'"></div>';
И кстати: составление строчки из многих кусков гораздо быстрее сделать так: сначала пихаешь кусочки в массив, потом join.
Есть еще спорный вариант "промежуточного кеширования" - когда из кусочков сначала составляется промежуточная строка небольшой длины, и только потом в массив пихается, но это надо извращаться подбирать оптимальную длину "кеша", к тому же на разных браузерах будет по-разному.

pilot

Потому что див надо закрывать: str+='<div class="square" id="square'+i+'_'+j+'"></div>';

Да, спасибо, работает.
http://www.w3.org/TR/html4/struct/global.html#edef-DIV :

Start tag: required, End tag: required

msdn тоже хочет закрывающий.
Почему-то казалось что <div/> == <div></div>.
// Хотя FF <br/> понимает как перевод строки, а <br></br> — как два.

Оставить комментарий