JavaScript'te span öğesinin metnini nasıl değiştirebilirim?

Eğer bir açıklığım varsa, söyle:

<span id="myspan"> hereismytext </span>

"Hereismytext" i "newtext" olarak değiştirmek için JavaScript'i nasıl kullanabilirim?

Modern tarayıcılar için şunları kullanmalısınız:

document.getElementById("myspan").textContent="newtext";

Eski tarayıcılar bilmese de, yeni metin kullanıcı girişi olduğunda XSS güvenlik açığı getirdiğinden textContentkullanılması önerilmez innerHTML(daha ayrıntılı bir tartışma için aşağıdaki diğer yanıtlara bakın):

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";

Kullanılması innerHTML edilir SO TAVSİYE DEĞİLDİR . Bunun yerine, bir textNode oluşturmalısınız. Bu şekilde metninizi "bağlarsınız" ve en azından bu durumda bir XSS saldırısına karşı savunmasız kalmazsınız.

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!!

Doğru yol:

span = document.getElementById("myspan");
txt = document.createTextNode("your cool text");
span.appendChild(txt);

Bu güvenlik açığı hakkında daha fazla bilgi için: Siteler Arası Komut Dosyası Oluşturma (XSS) - OWASP

4 Kasım 2017'de düzenlendi:

@Mumush önerisine göre üçüncü kod satırı değiştirildi : "bunun yerine appendChild (); kullanın".
Btw, @Jimbo Jonny'a göre, katmanlara göre Güvenlik prensibi uygulanarak her şeyin kullanıcı girişi olarak ele alınması gerektiğini düşünüyorum. Bu şekilde sürprizlerle karşılaşmazsınız.

document.getElementById('myspan').innerHTML = 'newtext';

EDIT: Bu 2014 yılında yazılmıştır. Muhtemelen artık IE8 umurumda değil ve kullanmayı unutabilirsiniz innerText. Sadece kullan textContentve onunla bitir hooray.

Metni sağlayan sizseniz ve metnin hiçbir kısmı kullanıcı tarafından (veya denetlemediğiniz başka bir kaynak) sağlanmazsa, ayar innerHTMLkabul edilebilir:

// * Fine for hardcoded text strings like this one or strings you otherwise 
//   control.
// * Not OK for user-supplied input or strings you don't control unless
//   you know what you are doing and have sanitized the string first.
document.getElementById('myspan').innerHTML = 'newtext';

Bununla birlikte, diğerlerinin belirttiği gibi, metin dizesinin herhangi bir bölümünün kaynağı değilseniz, önce metni innerHTMLdüzgün bir şekilde sterilize etmeye dikkat etmezseniz , kullanmak sizi XSS gibi içerik enjeksiyon saldırılarına maruz bırakabilir.

Kullanıcının girdisini kullanıyorsanız, tarayıcılar arası uyumluluğu da korurken, bunu güvenli bir şekilde yapmanın bir yolu vardır:

var span = document.getElementById('myspan');
span.innerText = span.textContent = 'newtext';

Firefox desteklemiyor innerTextve IE8 desteklemiyor, textContentbu nedenle çapraz tarayıcı uyumluluğunu korumak istiyorsanız her ikisini de kullanmanız gerekiyor.

Ve mümkünse yeniden akışlardan (neden olduğu innerText) kaçınmak istiyorsanız :

var span = document.getElementById('myspan');
if ('textContent' in span) {
    span.textContent = 'newtext';
} else {
    span.innerText = 'newtext';
}

Kullanıyorum Jqueryve yukarıdakilerin hiçbiri yardımcı olmadı, nedenini bilmiyorum ama bu işe yaradı:

 $("#span_id").text("new_value");

İşte başka bir yol:

var myspan = document.getElementById('myspan');

if (myspan.innerText) {
    myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
        myspan.textContent = "newtext";   
}

İnnerText özelliği Safari, Google Chrome ve MSIE tarafından algılanacaktır. Firefox için, bir şeyler yapmanın standart yolu textContent kullanmaktı, ancak 45 sürümünden beri, birisinin son zamanlarda nazikçe beni tuttuğu gibi, innerText özelliğine de sahip. Bu çözüm, bir tarayıcının bu özelliklerden birini destekleyip desteklemediğini test eder ve öyleyse "newtext" atar.

Canlı demo: burada

Yukarıdaki saf javascript cevaplarına ek olarak, jQuery metin yöntemini aşağıdaki gibi kullanabilirsiniz :

$('#myspan').text('newtext');

Bir yayılma alanı veya div öğelerinin html içeriğini almak / değiştirmek için cevabı genişletmeniz gerekiyorsa , bunu yapabilirsiniz:

$('#mydiv').html('<strong>new text</strong>');

Referanslar:

.text (): http://api.jquery.com/text/

.html (): http://api.jquery.com/html/

Yöntem, belirtilen seçiciye sahip ilk öğeyi döndürdüğünden 'myspan' kimliğinin benzersiz olduğunu varsayarak querySelector () yöntemini de kullanabilirsiniz:

document.querySelector('#myspan').textContent = 'newtext';

developer.mozilla

Diğer yanıtında, gibi innerHTML ve innerText tavsiye edilmez, daha iyi kullanım var textContent . Bu özellik iyi desteklenmektedir, şu adresten kontrol edebilirsiniz: http://caniuse.com/#search=textContent

document.getElementById("myspan").textContent="newtext";

bu, kimliğine sahip dom-düğümü seçer myspanve metin içeriğininew text

Yapabilirsin

 document.querySelector ("[Span]"). textContent = "content_to_display"; 

Bu açıklık için

<span id="name">sdfsdf</span>

Şunun gibi gidebilirsiniz: -

$("name").firstChild.nodeValue = "Hello" + "World";