Клонирование элементов HTML5 в IE 6-8. Кто придумает как обойти баг?

Question

SilentImp @SilentImp

Клонирование элементов HTML5 в IE 6-8. Кто придумает как обойти баг?

Приятного времени суток.

Обнаружил своеобразный баг.

После добавления

&lt;!--[if lt IE 9]&gt;
		&lt;s&#99;ript src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/s&#99;ript&gt;
		&lt;![endif]--&gt;

HTML5 элементы в IE 6-8 отображаются нормально.

Но если клонировать узел с HTML5 элементами c помощью .cloneNode(true) или jQuery .clone(true), то все HTML5 элементы будут потеряны.

Как показывает .innerHTML клонированного узла, превращается в <:nav></:nav>.

Если почистить innerHTML с помощью регулярного выражения… элементы просто исчезают без следа.

Есть ли идеи, как можно обойти этот баг, не создавая поэлементно достаточно сложную иерархию узлов?

С уважением и надеждой на ответ.

Вопрос задан более трёх лет назад
7345 просмотров

Комментировать

Подписаться 5 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 2

1 комментарий

SilentImp @SilentImp Автор вопроса

Спасибо вам огромное за ответ.
Тесткейс того что вышло:

<!DOCTYPE HTML>
<html lang="ru-RU">
	<head>
		<meta charset="UTF-8">
		<title>Тесткейс</title>
		<style type="text/css">
			.templateCollector{
				display:none;
			}
			.section,
			.article,
			.nav{
				display:block;
			}
		</style>
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<section class="diaryWrapper">
			<section class="diaryEntrys"></section>
		</section>
		<div class="templateCollector">
			<!--шаблон сообщения-->
			<article class="articleTemplate">
				<p class="message"></p>
				<time pubdate datetime="1996-01-01"></time>
				<nav>
					<ul class="entryControls">
						<li tabindex="4" class="edit">Редактировать</li>
						<li tabindex="4" class="delete">Удалить</li>
					</ul>
					<ul class="editControls">
						<li tabindex="4" class="save">Сохранить</li>
						<li tabindex="4" class="cancel">Отменить</li>
					</ul>
				</nav>
			</article>
		</div>
		<script type="text/javascript">
			document.querySelector('.diaryEntrys').innerHTML+= document.querySelector(".templateCollector .articleTemplate").outerHTML;
			
			var article = document.querySelectorAll('.diaryEntrys .articleTemplate');
			article = article[article.length-1];
			
			var p = article.querySelector(".message");

			var mess = 'тестовое <strong>сообщение</strong>';
			
			var time = article.querySelector("time");
			var timer = document.createElement("SPAN");
			var date = new Date();
			var readDate = document.createTextNode(date.getDate()+"."+date.getMonth()+"."+date.getFullYear());
			var readTime = document.createTextNode(date.getHours() +":"+date.getMinutes());
			
			
			timer.appendChild(readTime);
			
			time.setAttribute("pubdate","true");
			time.setAttribute("dateTime",date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate());
			time.appendChild(readDate);
			time.appendChild(timer);
			
			p.innerHTML = mess;

			article.setAttribute("id","note_1");
			article.className = "article";

			alert(article.outerHTML);

		</script>
	</body>
</html>

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- 1 подписчик
- 34 минуты назад
- 2 просмотра
0

ответов
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- 6 часов назад
- 30 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 21 час назад
- 129 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- вчера
- 97 просмотров
1

ответ
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 90 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 92 просмотра
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- вчера
- 647 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Маркетплейс в МЕДИЦИНСКОЙ тематике

24 нояб. 2024, в 21:55

200000 руб./за проект

Нужно подобие hamster combat

24 нояб. 2024, в 21:41

1000 руб./за проект

Тестирование Desktop-приложение

24 нояб. 2024, в 21:19

35000 руб./за проект

Answer 1 · 2010-11-19 15:28:40

Немного поигрался в IE8 и нашел решение. Для тех, кто не понял, выложу пример за автора (который то ли поленился, то ли...). Разумеется без jQuery :)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="demo">
1
</nav>
<div>
2
</div>
<script>
document.querySelector('body').appendChild(document.querySelector('nav').cloneNode(true));
console.log(document.querySelectorAll('nav')[1]);
document.querySelector('body').appendChild(document.querySelector('div').cloneNode(true));
console.log(document.querySelectorAll('div')[1]);
</script>
</body>
</html>

В итоге в консоли видим:

ЖУРНАЛ: undefined
ЖУРНАЛ: [object HTMLDivElement]

Если ie не хочет по хорошему, то мочим его его же оружием:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="demo">
1
</nav>
<div>
2
</div>
<script>
document.querySelector('body').innerHTML+=document.querySelector('nav').outerHTML;
console.log(document.querySelectorAll('nav')[1]);
document.querySelector('body').appendChild(document.querySelector('div').cloneNode(true));
console.log(document.querySelectorAll('div')[1]);
</script>
</body>
</html>

В консоли видим:

ЖУРНАЛ: [object HTMLGenericElement]
ЖУРНАЛ: [object HTMLDivElement]

P.S. На будущее выкладывайте готовые примеры без всяких jQuery и прочих хрени.

Answer 2 · 2010-11-19 15:43:16

ie6:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="demo">
1
</nav>
<div>
2
</div>
<script>
document.body.innerHTML+=document.getElementsByTagName('nav')[0].outerHTML;
alert(document.getElementsByTagName('nav')[1]);
document.body.appendChild(document.getElementsByTagName('div')[0].cloneNode(true));
alert(document.getElementsByTagName('div')[1]);
</script>
</body>
</html>

Клонирование элементов HTML5 в IE 6-8. Кто придумает как обойти баг?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт