Bagaimana cara mengubah teks elemen rentang dalam JavaScript

Jika saya memiliki rentang, katakan:

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

Bagaimana cara saya menggunakan JavaScript untuk mengubah "hereismytext" menjadi "newtext"?

Untuk peramban modern, Anda harus menggunakan:

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

Meskipun browser yang lebih lama mungkin tidak tahu textContent, itu tidak dianjurkan untuk digunakan innerHTMLkarena memperkenalkan kerentanan XSS ketika teks baru adalah input pengguna (lihat jawaban lain di bawah ini untuk diskusi yang lebih rinci):

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

Menggunakan innerHTML adalah SO TIDAK DIREKOMENDASIKAN . Sebagai gantinya, Anda harus membuat textNode. Dengan cara ini, Anda "mengikat" teks Anda dan Anda tidak, setidaknya dalam kasus ini, rentan terhadap serangan XSS.

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

Jalan yang benar:

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

Untuk informasi lebih lanjut tentang kerentanan ini: Cross Site Scripting (XSS) - OWASP

Diedit nov ke-4 2017:

Dimodifikasi baris ketiga kode sesuai dengan saran @mumush : "gunakan appendChild (); sebagai gantinya".
Btw, menurut @Jimbo Jonny saya pikir semuanya harus diperlakukan sebagai input pengguna dengan menerapkan prinsip Keamanan oleh lapisan. Dengan begitu Anda tidak akan menemukan kejutan.

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

EDIT: Ini ditulis pada tahun 2014. Anda mungkin tidak peduli tentang IE8 lagi dan bisa lupa menggunakan innerText. Cukup gunakan textContentdan lakukan saja, hore.

Jika Anda yang memasok teks dan tidak ada bagian teks yang disediakan oleh pengguna (atau sumber lain yang tidak Anda kontrol), maka pengaturan innerHTMLmungkin dapat diterima:

// * 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';

Namun, seperti yang dicatat orang lain, jika Anda bukan sumber untuk bagian mana pun dari string teks, menggunakan innerHTMLdapat membuat Anda terkena serangan injeksi konten seperti XSS jika Anda tidak hati-hati membersihkan teks terlebih dahulu dengan benar.

Jika Anda menggunakan input dari pengguna, berikut adalah salah satu cara untuk melakukannya dengan aman sambil tetap menjaga kompatibilitas lintas-browser:

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

Firefox tidak mendukung innerTextdan IE8 tidak mendukung textContentsehingga Anda perlu menggunakan keduanya jika Anda ingin mempertahankan kompatibilitas lintas-browser.

Dan jika Anda ingin menghindari reflows (disebabkan oleh innerText) jika memungkinkan:

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

Saya menggunakan Jquerydan tidak ada yang membantu, saya tidak tahu mengapa tetapi ini berhasil:

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

Inilah cara lain:

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

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

Properti innerText akan terdeteksi oleh Safari, Google Chrome dan MSIE. Untuk Firefox, cara standar dalam melakukan sesuatu adalah dengan menggunakan textContent tetapi karena versi 45 ia juga memiliki properti innerText, karena seseorang dengan ramah memberi tahu saya baru-baru ini. Solusi ini menguji apakah browser mendukung salah satu dari properti ini dan jika demikian, tetapkan "teks baru".

Demo langsung: di sini

Selain jawaban javascript murni di atas, Anda dapat menggunakan metode teks jQuery sebagai berikut:

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

Jika Anda perlu memperluas jawaban untuk mendapatkan / mengubah konten html dari elemen span atau div, Anda dapat melakukan ini:

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

Referensi:

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

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

Anda juga dapat menggunakan metode querySelector (), dengan asumsi id 'myspan' unik karena metode mengembalikan elemen pertama dengan pemilih yang ditentukan:

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

developer.mozilla

Seperti pada jawaban lain, innerHTML dan innerText tidak disarankan, lebih baik gunakan textContent . Atribut ini didukung dengan baik, Anda dapat memeriksanya: http://caniuse.com/#search=textContent

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

ini akan memilih dom-node dengan id myspandan mengubahnya ke konten teksnew text

Anda dapat melakukan

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

Untuk rentang ini

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

Anda bisa seperti ini: -

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