Поведение innerHTML
Добрый день. Проблема следующая:
При добавлении на страницу тегов с помощью innerHTML автоматически добавляется закрывающий тег к незакрытым. Т.е. если добавляю "<a>", получаю "<a></a>"; Как этого избежать? Есть ли альтернатива innerHTML? P.S. Извиняюсь, по-моему я не там где надо тему создал. |
Никак не избежать.
Альтернатива для чего? |
Альтернатива для добавления тегов без автоматического их закрывания.
Т.е. добавляю "<a>" получаю "<a>". |
innerHTML - это innerHTML, оп парсится браузером, а нормальный браузер видя незакрытый тег сам его закрывает за неряхой.)
Если вы последовательно составляете строку, то составляйте её не выводя. Пример: не правильно
*!* el.innerHTML = '<a>'; el.innerHTML += 'bla bla bla'; el.innerHTML += '</a>';*/!* Пример: правильно
text = '<a>'; text += 'bla bla bla'; el.innerHTML=text+'</a>'; Есть ещё один вариант, но он возможен только во время загрузки страницы и не будет работать как реакция на действия пользоваться, поскольку разбирается браузером сразу по ходу загрузки совместно с обычным html. Пример: в особом случае
document.write('<a>');
document.write('bla bla bla');
document.write('</a>');
|
text = '<a>'; text += 'bla bla bla'; el.innerHTML=text+'</a>'; Так не подходит. Мне нужно сделать так, чтобы строка появлялась постепенно, символ за символом, как буд-то печатает печатная машинка. С простым текстом (без HTML тегов) всё отлично, но с текстом содержащим теги получается дёрганье, т.е. сначала прописывается < а затем исчезает. Вот код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JS</title>
<script language="JavaScript">
var htmlarchive,htmlout='',i=0,starttime;
function one()
{
htmlarchive = document.getElementById('test').innerHTML;
document.getElementById('test').innerHTML="";
starttime = setInterval(echo,10);
}
function echo()
{
i+=1;
htmlout += htmlarchive.substring(i-1,i);
document.getElementById('test').innerHTML = htmlout;
}
</script>
</head>
<body onload="one()">
<div id="test">«На наш взгляд, <a href=''>иностранные военные</a> присутствия в Афганистане могут и должны предпринять более активные усилия в борьбе с наркопроизводством в этой стране, раз уж они практически взяли на себя ответственность за вопросы безопасности в Афганистане», - сказано в сообщении.</div>
</body>
</html>
Можно конечно шаг увеличить и тогда этого дёрганья не будет видно, но всё таки хотелось решить проблему. Есть какие-нибудь идеи? |
Цитата:
http://scriptic.narod.ru/html/symbol.htm |
не знаю,но по моему будет безобразно выглядеть вся затея если сначала будет в тексте часть тега отображаться(в качестве лишней информации) а потом когда он войдёт весь -стиль отображения текста в нём изменится
тем более -судя по тексту это какойто новостной ресурс-посетителям врядли будет интересно созерцать из каких запчастей состоит страница состоит страница. так что наверное стоит теги в паре сразу и внутри их текст по буквам показывать Цитата:
|
Цитата:
dmitriymar, нет это не новостной ресурс, это я воткнул первый попавшийся текст. Я просто надеялся, что в JS есть ещё какой нибудь метод вставить текст без парсинга браузером. Раз таковых нет, придётся изощряться. |
Цитата:
|
Цитата:
что само по идее в реализации этого будет геморно |
Как-то так. Только вложенность тегов не поддерживается. Если надо морочтесь с рекурсией самостоятельно.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
window.onload=function()
{
var doc=document.getElementById('test');
var text=doc.innerText?'innerText':'textContent';
var cn=doc.childNodes, i=cn.length; //берем все ноды
var strings=[];
while(i--){
strings.unshift(cn[i][text]);
cn[i][text]='';
} //проходим собирая всеь текст в вспогательный массив strings, то на странице остаются лишь теги(можно добавить проверку на тип ноды и не текстовым добавлять displasy:none)
var ch=0,node=0;
function echo()
{
if(strings[node].length<=++ch){
ch=0;
if(!strings[++node]){ //в случае если нод больше нет - омтанавливаемся
clearInterval(interval)
return false;
}
}
cn[node][text]+=strings[node].charAt(ch);
}
var interval = setInterval(echo,50);
}
</script>
</head>
<body>
<div id="test">«На наш взгляд, <a href=''>иностранные военные</a> присутствия в Афг<b>анистане могут</b> и должны предпринять более активные усилия в борьбе с наркопроизводством в этой стране, раз уж <i>они практически</i> взяли на себя ответственность за вопросы безопасности в Афганистане», - сказано в сообщении.</div>
</body>
</html>
|
печатная машинка и сохранение тегов
Вариант ... составляем масив текстовых нод, обнуляем их содержимое и востанавливаем по таймеру ... сохраняется любая вложенность тегов так как структура HTML остаёться неизменной
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="test">«На наш взгляд, <a href=''>иностранные военные</a> присутствия в Афг<b>анис<i>тане</i> могут</b> и должны предпринять более активные усилия в борьбе с наркопроизводством в этой стране, раз уж <i>они практически</i> взяли на себя ответственность за вопросы безопасности в Афганистане», - сказано в сообщении.</div>
<script language="JavaScript" type="text/javascript">
var textNodes = [];
var textNodes_data = [];
var i=0;
function search_textNodes(b) {
b = b.childNodes;
for (var c = 0, d = b.length; c < d; c++) {
var a = b[c];
if (a.nodeType == 3) {
textNodes.push(a);
textNodes_data.push(a.data);
a.data = ""
} else a.hasChildNodes() && search_textNodes(a)
}
};
var d = document.getElementById('test');
search_textNodes(d);
function str_write() {
var a = textNodes_data[i];
if (a) {
textNodes[i].data += a.charAt(0);
textNodes_data[i] = a.substr(1)
} else i++;
i < textNodes.length && setTimeout(arguments.callee, 100)
};
str_write()
</script>
</body>
</html>
|
рони, Aetae спасибо за помощь, это то, что нужно. Буду разбираться как это работает.
|
| Часовой пояс GMT +3, время: 02:19. |