Javascript-форум - Вставка строк в таблицу

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Вставка строк в таблицу (https://javascript.ru/forum/dom-window/56921-vstavka-strok-v-tablicu.html)

Вставка строк в таблицу

Доброго времени суток!
Вопрос конечно избитый и не раз уже поднимался, но все таки...

Есть таблица

<table>
<tr>
	<td></td>
</tr>
<tbody id="mytestid">
</tbody>
<tr>
	<td></td>
</tr>
</table>

В TBODY с заданным ID требуется вставить строки. Количество строк неизвестно, формируется динамически. То есть, при нажатии кнопки выполняется AJAX запрос, который возвращает данные вида

<tr>
	<td></td>
</tr>
<tr>
	<td></td>
</tr>

Необходим кроссбраузерный вариант. Удалось решить задачу при помощи jQuery

$("#mytestid tr").remove();
$("#mytestid").append("<tr><td>...</td></tr><tr><td>...</td></tr>");

То есть, такой вариант работает нормально в IE, FF, Opera.
НО, в движке, под который пишу, в качестве фреймворка используется YUI 2.

Соответственно просьба к знатокам: помогите переписать вышепреведенный код, либо под чистый JS либо под YUI.

Заранее благодарен!

Я правильно понимаю, перед вставкой предыдущие элементы <tr> удаляются?

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    table, td { border: 1px solid black; }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>lalala</td>
    </tr>
    <tbody id="mytestid">
    </tbody>
    <tr>
      <td>lalala</td>
    </tr>
  </table>
  <button>Add cells</button>

  <script>
    var button = document.getElementsByTagName('button')[0],
        tbody = document.getElementById('mytestid');


    Element.prototype.remove = Element.prototype.remove || function() {
      if(this.parentNode) {
        this.parentNode.removeChild(this);
      }
    };

    function removeChildren(elem) {
      try {
        elem.innerHTML = '';
      } catch(e) {
        while(elem.firstChild) {
          elem.firstChild.remove();
        }
      }
    }

    button.onclick = function() {
      removeChildren(tbody);
      tbody.insertAdjacentHTML('afterBegin', '<tr><td>...</td></tr><tr><td>...</td></tr>');
    };
  </script>
</body>
</html>

Цитата:

Сообщение от Decode

Я правильно понимаю, перед вставкой предыдущие элементы <tr> удаляются?

Да, все верно. Получается некий аналог innerHTML.

К сожалению, ваш пример не работает в IE, ругается на

tbody.insertAdjacentHTML

говорит "Недопустимый конечный элемент для данного действия."
:(

Странно, insertAdjacentHTML работает даже в старых IE. А какая у вас версия?

Цитата:

Сообщение от Decode

А какая у вас версия?

IE 8

А что вы передаете вторым параметром в insertAdjacentHTML?

Запускаю ваш пример AS IS. Нет, сам insertAdjacentHTML работает, заменил вставку tr-td на ul-li и все отработало без проблем. Думаю причина именно в элементах. IE упорно не хочет вставлять строки в tbody, хотя jQuery .append без проблем отрабатывает и строчки вставляются :(

Попробуйте изменить функцию removeChildren.

function removeChildren(elem) {
    while(elem.firstChild) {
        elem.firstChild.remove();
    }
}

Все равно не работает. Да и дело ведь не в удалении, а в вставке

Цитата:

Сообщение от S.E.K.T.O.R.

Есть таблица

Что за бред? Не бывает таких таблиц.

Второе, откуда проблема? Или по-вашему этот код

tbody.innerHTML=data.innerHTML;

не сквозь-браузерный?

Кончайте изобретать атом водорода.