Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Странное поведение innerHTML (https://javascript.ru/forum/misc/30626-strannoe-povedenie-innerhtml.html)

DoubleDragon 10.08.2012 11:19
Странное поведение innerHTML
 
Вопрос знатокам на засыпку.

Есть код:
Код:
<html>
<body>
<div id='printDiv'></div>
<script>

var var0 = 'Test';

// тег <i> работает
printDiv.innerHTML+="<i>"+var0+"</i> ";

// тег <i> не работает
printDiv.innerHTML+="<i>";
printDiv.innerHTML+=var0;
printDiv.innerHTML+="</i>";

</script>
</body>
</html>
Почему во втором случае тег <i> не работает? Естественно, вместо <i> может быть что угодно.

vadim5june 10.08.2012 11:28
innerHTML работает с DOM а не просто вставляет текст в документ-соответтвенно незаконченные элементы такие как <i> игнорирует
с помощью innerHTML+ не рекомендую вставлять ибо некоторые события при этом у других элементов могут пропасть

DoubleDragon 10.08.2012 11:31
Хорошо, а какой же выход есть в данном случае? У меня текст в printDiv составляется из нескольких независимых частей, каждая из которых не знает о содержании других. Т.е. интересует, как отформатировать текст (в данном случае var0)?

vadim5june 10.08.2012 11:34
Цитата:
Сообщение от DoubleDragon (Сообщение 196151)
Хорошо, а какой же выход есть в данном случае? У меня текст в printDiv составляется из нескольких независимых частей, каждая из которых не знает о содержании других. Т.е. интересует, как отформатировать текст (в данном случае var0)?
а в какую-то переменную нельзя сначала собрать?

DoubleDragon 10.08.2012 11:38
Нет, это парсер независимых частей. Всё работает, а с этой промблемой я уже намучался. Может во что-то оборачивать var0 и через стили устанавливать форматирование? Будет это работать?

vadim5june 10.08.2012 11:43
Цитата:
Сообщение от DoubleDragon (Сообщение 196154)
Нет, это парсер независимых частей. Всё работает, а с этой промблемой я уже намучался. Может во что-то оборачивать var0 и через стили устанавливать форматирование? Будет это работать?
если <span id='a1'>var0</span> то потом через стили можно задать

lord2kim 10.08.2012 11:45
DoubleDragon, а почему бы вам не воспользоваться DOM?
<html>
<body>
<div id='printDiv'></div>
<script>
var var0 = 'Test';

var i = document.createElement("i");
i.appendChild(document.createTextNode(var0));
document.getElementById("printDiv").appendChild(i);
</script>
</body>
</html>

DoubleDragon 10.08.2012 12:34
Да, DOM тоже вариант. Но мой пример сильно упрощённый. Реальность гораздо сложнее.
В любом случае спасибо за идею.

vadim5june 10.08.2012 13:30
Цитата:
Сообщение от DoubleDragon (Сообщение 196181)
Да, DOM тоже вариант. Но мой пример сильно упрощённый. Реальность гораздо сложнее.
В любом случае спасибо за идею.
Если получится делайте с DOM

bes 10.08.2012 16:09
Цитата:
Сообщение от vadim5june
innerHTML работает с DOM а не просто вставляет текст в документ-соответтвенно незаконченные элементы такие как <i> игнорирует
он их закрывает, поэтому закрывающую часть можно и не прописывать
<div id='printDiv'></div>
<script>
window.onload = function () {
	var printDiv = document.getElementById('printDiv');
	var var0 = 'Test';
	
	printDiv.innerHTML+="<i>" + var0;
	alert(printDiv.innerHTML);
	
	printDiv.innerHTML+="<i>";
	alert(printDiv.innerHTML);
	
	printDiv.innerHTML+=var0;
	alert(printDiv.innerHTML);
}
</script>


Часовой пояс GMT +3, время: 01:47.