JavaScript. проблемы с innerHTML в разных браузерах

Gifik · August 10, 2007

Доброго времени суток. Столкнулся с проблемами с innerHTML. Буду очень благодарен за помощь!

Проблема такова:

Есть функция вида:

function insInnerHtml(id, html)

{

d=document.getElementById(id)

d.innerHTML=html;

}

Проблема 1 в Internet Explorer: если я вставляю таким образом HTML на страницу, а в том HTML был элемент, например, c id = 'ins_here' и я пытаюсь вставить туда другой HTML этой же функцией, то Explorer не отрабатывает и пишет JavaScript ошибку дословно: "Неизвестная ошибка выполнения".

Неужели innerHTML в Explorer не может вставить HTML в код, уже вставленный в документ тоже с помощью innerHTML?

Проблема 2 в Opera: имеется таблица

И имеется шаблон строки:

строка

Если я пытаюсь вставить с помощью innerHTML код строки в таблицу, то в Opera теряются все тэги!

Решение с помощью createCell и других нодов не подходит. Код строки берется из шаблона и переписывать под каждое мелкое изменение кода строки код JavaScript - это убийственно! А таких строк различного вида на сайте может быть много.

Решение есть, если вставлять строки вместе с тегами

Подобное было в FireFox, но в том случае, если я вставлял теги

не в таблицу, а следовательно неправильные теги пропадали - все логично. Но в Opera они пропадают вне зависимости от того, в правильное место документа они вставляются или нет.

Вот такие проблемы!

Заранее спасибо большое за советы!

PacMan · August 10, 2007

Изменять структуру DOM с помощью свойства innerHTML некорректно в принципе. Забудьте его и пользуйтесь createNode

Решение с помощью createCell и других нодов не подходит. Код строки берется из шаблона и переписывать под каждое мелкое изменение кода строки код JavaScript - это убийственно!

А вы как хотели! Я лично пользуюсь компонентом Builder библиотеки scriptaculous.

WingedFox · August 10, 2007

PacMan

Зато это единственный способ быстрой отрисовки. http://www.quirksmode.org/dom/innerhtml.html

Gifik

Я пользую примерно такую функцию

function appendRow (target, html) {
	var el = document.createElement('div')
	el.innerHTML='<table style="table-layout:fixed">'+html+'</table>'
	target.appendChild(el.firstChild.rows[0])
}

Gifik · August 10, 2007

Хм. Проблема с Эксплорером оказалась немного сложнее.

Простая замена innerHTML работает в части, уже вставленной innerHTML. Теперь предстоит понять, в чем же отличия моего оригинально скрипта от упрощенной версии. Позже тогда выкину код скрипта, если ничего не получится сюда

Проблему с Оперой, думаю, решить придется именно обновлением не одной строки, а всей таблицы.

to PacMan: библиотеку гляну! Если разберусь, то тогда рассмотрю и этот вариант! Спасибо!

PacMan · August 10, 2007

PacMan
Зато это единственный способ быстрой отрисовки. http://www.quirksmode.org/dom/innerhtml.html

Быстро - не значит хорошо. Учитывая производительность современных машин эта статистика неактуальна. И, вы версии браузеров в этой статье смотрели?

WingedFox · August 10, 2007

PacMan

Я последние пару месяцев сравниваю производительность различных решений на своей шкуре.

Рендеринг 6000 ячеек таблицы (2000х3) на P4/2.8Ghz в IE 6 занимает

- до 6 минут при insertRow/insertCell

- до 3 минут при appendChild

- до 14 секунд при innerHTML

Единственное что мне не нравится в innerHTML это стойкое игнорирование Мозиллой кастомных атрибутов.

Если бы существовали более адекватные пути сериализации HTML, я бы пользовался ими.

Gifik

IE не поддерживает innerHMTL для table/tbody/thead/tfoot/tr.

Gifik · August 10, 2007

to WingedFox: спасибо! Действительно не поддерживает Explorer такую фишку.

Провел исследование:

<html>
<head>
	<title>test</title>
</head>
<body>

<p>В таблице:</p>
<table id="to_table">
 <tbody>
  <tr>
	<td></td>
  </tr>
 </tbody>
</table>
<p>В теле таблицы:</p>
<table>
 <tbody id="to_tbody">
  <tr>
	<td></td>
  </tr>
 </tbody>
</table>
<p>В строке:</p>
<table>
 <tbody>
  <tr id="to_tr">
	<td></td>
  </tr>
 </tbody>
</table>
<p>В ячейке:</p>
<table>
 <tbody>
  <tr>
	<td id="to_td"></td>
  </tr>
 </tbody>
</table>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function innerHT(id,html)
 {
  var c = document.getElementById(id);
  c.innerHTML = html;
 }
function alertHT(id)
 {
  var c = document.getElementById(id);
  alert(c.innerHTML);
 }

innerHT('to_table',"<tbody><tr><td>Я вижу!</td></tr></tbody>");
alertHT('to_table');
innerHT('to_tbody',"<tr><td>Я вижу!</td></tr>");
alertHT('to_tbody');
innerHT('to_tr',"<td>Я вижу!</td>");
alertHT('to_tr');
innerHT('to_td',"Я вижу!");
alertHT('to_td');


/*]]>*/
</script>

</body>

</html>

Firefox : отображается все "Я вижу!" и innerHTML везде корректен!

Opera 9 : отображается все "Я вижу!", но теги все обрубаются напрочь!

Internet Explorer : ни одна надпись "Я вижу!" не отображается! И что самое интересное: ни одно сообщение не показывает. Как я понимаю, в Эксплорере что-то клинит и все...

Вот такая ситуация! FireFox молодец!!!

P.S.: но данный тест не отображает в Explorere ошибку, как в моем - пойду дальше экспериментить!

Gifik · August 10, 2007

Все. Проблема решена.

Вставляю в код страницы теперь не отдельные строки таблицы, а еще и заключаю их в

Всем спасибо за советы! Мне они очень помогли найти решение (особенно совет WingedFox - отдельное большое спасибо)!

Только осталась еще одна загвоздка.

Небольшой глюк в Opera. При вставке функцией innerHTML кода, старый код остается виден, т.е. при прокрутке вниз на экран и обратно все становится нормально, но так получается, текст накладывается друг на друга. Может, кто знает, как это решить?

Sign In

JavaScript. проблемы с innerHTML в разных браузерах

Question

Gifik

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

PacMan

Link to comment

Share on other sites

WingedFox

Link to comment

Share on other sites

Gifik

Link to comment

Share on other sites

PacMan

Link to comment

Share on other sites

WingedFox

Link to comment

Share on other sites

Gifik

Link to comment

Share on other sites

Gifik

Link to comment

Share on other sites

Обсуждения

Forums

Important Information