Wprowadź nową linię (\ n) z innerHTML w pre elementu w IE nie działa?

Mam do czynienia z następującym problemem: Mam dokument HTML, w którym chcę wydrukować podstawowe komunikaty o statusie/debugowanie/etc.Wprowadź nową linię ( n) z innerHTML w pre elementu w IE nie działa?

Tak, dokument HTML zawiera pusty wstępny element, którego identyfikator jest się:

<body onload='init() && main();'> 

<pre id='out'> 
</pre> 

</body> 
</html>

init() funkcja przypisuje wstępnie elementu do zmiennej:

var out_div; 

    function init() { 
     out_div = document.getElementById('out') 
     return 1; 
    }

Następnie , aby wydrukować coś w pre-div, używam tej funkcji:

function txt_out(txt) { 
     out_div.innerHTML += "\n" + txt 
    }

Nowa linia powinna upewnić się, że każde wywołanie txt_out jest zapisane we własnym wierszu. Działa to zgodnie z oczekiwaniami w przeglądarce Firefox. Jednak IE nie zwraca uwagi na \ n. Czy to nie tak ze strony IE, czy robię coś nie tak?

Źródło

2009-11-25 René Nyffenegger

tylko
EAK to – Amarghosh

Tak to się dzieje na części IE. IE usuwa początkowe białe znaki podczas ustawiania innerHTML: http://bytes.inso.cc/wp/2009/11/07/internet-explorer-strips-leading-whitespaces-in-text-nodes/ Biblioteki mogą pomóc w złagodzeniu tego (jQuery I know robi to za pomocą metody '.html()'). –

W razie wątpliwości IE nie ma racji. –

To known problem w programie Internet Explorer. Aby obejść ten problem, wstaw element <br> zamiast znaku nowego wiersza.

Źródło

2009-11-25 15:59:04

Dokładnie. Ładny link. –

@BalusC - pre elementy nie ** zawierają ** CDATA, a br nie znajduje się na liście wykluczonych elementów potomnych (http://www.w3.org/TR/html4/struct/text.html#h-9.3 .4). Dlaczego uważasz, że element br nie zadziała? – Quentin

Zmień swój kod do:

function txt_out(txt) { 
     out_div.innerHTML += "<br />" + txt 
    }

Źródło

2009-11-25 15:58:47

Zmiana <br />

Źródło

2009-11-25 15:58:50

Robienie rzeczy takich jak element.innerHtml += something; jest zwykle złą praktyką, ponieważ powoduje, że przeglądarka ponownie analizuje całą zawartość elementu. Gdy dodajesz coraz więcej danych, za każdym razem staje się wolniejsze i wolniejsze. Unieważnia także odsłuchacze referencje/zdarzenia, które mogą mieć inne części kodu na swoich podelementach.

Lepiej używać znacznika div; coś takiego:

<div id='out'></div>

a następnie dołączać nowe elementy podrzędne w locie:

out_div = document.getElementById('out'); 

// add a new message 
new_element = document.createElement('div'); 
new_element.textContent = "your message here"; 
new_element.className = "some_class"; // CSS class for changing the appearance 
out_div.appendChild(new_element);

Źródło

2009-11-25 15:59:10 intgr

Ups! Naprawiono błędy JavaScript w mojej odpowiedzi. – intgr

Wprowadź nową linię (\ n) z innerHTML w pre elementu w IE nie działa?

Odpowiedz

Powiązane problemy