1 Тема від Yola

  • Yola
  • Yola
  • Replace Group
  • Поза форумом
  • Звідки: ukrainian.stackexchange.com
  • Дата реєстрації: 16.04.2013
  • Повідомлень: 1 387
    • Репутація: 640

Тема: У чім різниця між двома шматками здавалось би тотожного коду?

        <span id="mytable"></span>

   
Варіант 1:    

        <script>
        var span_table = document.getElementById("mytable");
        span_table.innerHTML = "<table>";
        // Зневаджувач показує, що тут span_table.innerHTML містить уже "<table></table>". 
        // Чому так?
        for (var i = 0; i < 2; i++) {
            span_table.innerHTML += "<tr>";
            for (var j = 0; j < 3; j++) {
                span_table.innerHTML += "<td>0</td>";
            }
            span_table.innerHTML += "</tr>";
        }
        span_table.innerHTML += "</table>";
        // А тут - "<table></table>000000". 
        </script>

Варіант 2:

        <script>
        var table_html = "<table>";
        for (var i = 0; i < 2; i++) {
            table_html += "<tr>";
            for (var j = 0; j < 3; j++) {
                table_html += "<td>0</td>";
            }
            table_html += "</tr>";
        }
        
        var span_table = document.getElementById("mytable");
        span_table.innerHTML = table_html;
        </script>

Працює лише другий варіант.

Yola вебсайт

2 Відповідь від Yola

  • Yola
  • Yola
  • Replace Group
  • Поза форумом
  • Звідки: ukrainian.stackexchange.com
  • Дата реєстрації: 16.04.2013
  • Повідомлень: 1 387
    • Репутація: 640

Re: У чім різниця між двома шматками здавалось би тотожного коду?

Допоки писав запитання, надибав, що треба писати щось таке:

        <script>
        var table=document.createElement("table");
        for (var i = 0; i < 2; i++)
        {
            var row = document.createElement("tr");
            table.appendChild(row);
            for (var j = 0; j < 5; j++)
            {
                var cell = document.createElement("td");
                row.appendChild(cell);
                cell.appendChild(document.createTextNode(j + " cell"));
            }
        }
        
        mytable.appendChild( table );        
        </script>

Як краще і чому?

Подякували: Wsewlad1

Yola вебсайт

3 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 780
    • Репутація: 13451

Re: У чім різниця між двома шматками здавалось би тотожного коду?

Краще безумовно останнє, тому що браузер працює з DOM, а HTML тільки дає йому дані для побудови. Останній код напряму змінює DOM, перші два - додають HTML, який браузер намагається розібрати і додати в DOM. Власне, в цьому і проблема першого коду: ви спершу додаєте тег <table>. Незакритий <table> заборонений, тому браузер, коли розбирає, автоматично додає </table>. Далі ви після того </table> додаєте <tr>... ви зрозуміли, так?

Подякували: Wsewlad, Yola, leofun013

koala вебсайт