HTML Metin olarak nasıl eklenir

Question

Örneğin, düz metin olarak ve gerçek bir etiket olarak tarayıcı tarafından yorumlanmayacak şekilde göstermek için HTML, örneğin, <p> öğesini istiyorum.

JQuery'nin .html ve .text olduğunu biliyorum, ancak bu işlem ham JS'de nasıl yapılır?

%3Cp%3E için <p> kodlar encodeURIComponent gibi işlevleri vardır ama sadece HTML içine koymak, eğer %3Cp%3E olarak tam anlamıyla yorumlar.

Ayrıca, > ve < gibi şeyler de var, çalışıyorlar, ancak bundan & unescapes kaçan JavaScript işlevleri bulamıyorum.

HTML'yi ham JavaScript ile metin olarak göstermenin doğru bir yolu var mı?

Answer 1

Karakterlerden kurtulmaya gerek yoktur. Basitçe createTextNode kullanın: http://jsfiddle.net/tZ3Xj/:

var text = document.createTextNode('<p>Stuff</p>'); 
document.body.appendChild(text); 

burada çalışan bir örneğe bakın.

Bu

tam olarak jQuery ( line 43 of jQuery 1.5.2) bunu nasıl:

return this.empty().append((this[0] && this[0].ownerDocument || document).createTextNode(text)); 

Answer 2

Prototip tarafından kullanılan fonksiyon iyi bir başlangıç ​​gibi görünüyor: kullanmak daha uygundur

http://www.prototypejs.org/api/string/escapeHTML

function escapeHTML() { 
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); 
} 

Version Dış prototip:

function escapeHTML(html) { 
    return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); 
} 

Answer 3

Bu şimdiye html

ön etiketi kullanmaya önermek createTextNode

var target div = document.getElementById('div1'); 
targetDiv.appendChild(document.createTextNode('<p>HelloWorld</p>')); 

Answer 4

yöntemi için bir iş olduğunu ve

<p>Hi </p> 

kopyalamak eğer this link

örn kullanarak dönüştürebilirsiniz

size dönüştürülmüş kodu ...

<p>Hi </p> 

Sadece kopyalayıp öncesi kod yukarıda yapıştırın ve

Answer 5

Sen DOM öğeleri çoğundan innerText videoları kullanabilirsiniz ... iyi çalışır: etiketler formatlanmaz

document.getElementById('some').innerText = "There can be <b> even HTML tags </b>"; 

. Yeni satır ve daha fazla kod için \n'u kullanabilirsiniz (\t, \u2623 ...). Sabit boyutlu karakterler kullanmak istiyorsanız, kolay <pre> etiketini kullanabilirsiniz.