Клонирование элементов 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

Простой
Как правильнее организовать код калькулятора?
- 1 подписчик
- 32 минуты назад
- 22 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как заменить данные в поле ACF WP по клику на кнопку и сохранить?
- 1 подписчик
- 3 часа назад
- 25 просмотров
0

ответов
JavaScript

+3 ещё

Средний
Как поменять тип проекции карты в Leaflet?
- 3 подписчика
- 6 часов назад
- 81 просмотр
1

ответ
HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- 8 часов назад
- 176 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 9 часов назад
- 47 просмотров
0

ответов
JavaScript

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- 21 час назад
- 49 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 21 час назад
- 129 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- 23 часа назад
- 34 просмотра
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- вчера
- 664 просмотра
2

ответа
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- вчера
- 84 просмотра
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Реализация авторизации на сайте через Госуслуги

02 мая 2024, в 20:43

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

Доработка верстки на Nuxt 3 Срочно

02 мая 2024, в 20:27

1500 руб./в час

Написать программу с использованием машинного обучения на языке MATLAB

02 мая 2024, в 20:16

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

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. Кто придумает как обойти баг?

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

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

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