Làm cách nào để thay đổi văn bản của phần tử span trong JavaScript

Nếu tôi có một nhịp, nói:

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

Làm cách nào để sử dụng JavaScript để thay đổi "hereismytext" thành "newtext"?

Đối với các trình duyệt hiện đại, bạn nên sử dụng:

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

Mặc dù các trình duyệt cũ hơn có thể không biết textContent, nhưng không nên sử dụng innerHTMLvì nó giới thiệu lỗ hổng XSS khi văn bản mới là đầu vào của người dùng (xem các câu trả lời khác bên dưới để thảo luận chi tiết hơn):

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

Sử dụng innerHTML là SO KHÔNG NÊN . Thay vào đó, bạn nên tạo một textNode. Bằng cách này, bạn đang "ràng buộc" văn bản của mình và ít nhất là trong trường hợp này, bạn không dễ bị tấn công XSS.

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

Đúng cách

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

Để biết thêm thông tin về lỗ hổng này: Cross Site Scripting (XSS) - OWASP

Đã chỉnh sửa tiểu thuyết thứ 4 năm 2017:

Sửa đổi dòng mã thứ ba theo đề xuất @mumush : "sử dụng appendChild (); thay vào đó".
Btw, theo @Jimbo Jonny Tôi nghĩ mọi thứ nên được coi là đầu vào của người dùng bằng cách áp dụng nguyên tắc Bảo mật theo lớp. Bằng cách đó bạn sẽ không gặp phải bất ngờ.

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

EDIT: Điều này đã được viết vào năm 2014. Có lẽ bạn không quan tâm đến IE8 nữa và có thể quên sử dụng innerText. Chỉ cần sử dụng textContentvà được thực hiện với nó, hoan hô.

Nếu bạn là người cung cấp văn bản và không có phần văn bản nào được cung cấp bởi người dùng (hoặc một số nguồn khác mà bạn không kiểm soát), thì cài đặt innerHTMLcó thể được chấp nhận:

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

Tuy nhiên, như những người khác lưu ý, nếu bạn không phải là nguồn cho bất kỳ phần nào của chuỗi văn bản, việc sử dụng innerHTMLcó thể khiến bạn bị tấn công nội dung như XSS nếu trước tiên bạn không cẩn thận vệ sinh văn bản đúng cách.

Nếu bạn đang sử dụng đầu vào từ người dùng, đây là một cách để làm điều đó một cách an toàn trong khi vẫn duy trì khả năng tương thích giữa nhiều trình duyệt:

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

Firefox không hỗ trợ innerTextvà IE8 không hỗ trợ textContentnên bạn cần sử dụng cả hai nếu bạn muốn duy trì khả năng tương thích giữa nhiều trình duyệt.

Và nếu bạn muốn tránh phản xạ (gây ra bởi innerText) nếu có thể:

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

Tôi sử dụng Jqueryvà không có cách nào ở trên giúp được, tôi không biết tại sao nhưng điều này có hiệu quả:

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

Đây là một cách khác:

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

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

Thuộc tính InternalText sẽ được Safari, Google Chrome và MSIE phát hiện. Đối với Firefox, cách làm tiêu chuẩn là sử dụng textContent nhưng kể từ phiên bản 45, nó cũng có một thuộc tính bên trong, như một người nào đó vui lòng thông báo cho tôi gần đây. Giải pháp này kiểm tra xem liệu trình duyệt có hỗ trợ một trong hai thuộc tính này hay không và nếu có, hãy gán "newtext".

Bản demo trực tiếp: tại đây

Ngoài các câu trả lời javascript thuần túy ở trên, Bạn có thể sử dụng phương thức văn bản jQuery như sau:

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

Nếu bạn cần mở rộng câu trả lời để nhận / thay đổi nội dung html của một phần tử span hoặc div, bạn có thể làm điều này:

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

Người giới thiệu:

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

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

Bạn cũng có thể sử dụng phương thức querySelector (), giả sử id 'myspan' là duy nhất vì phương thức trả về phần tử đầu tiên với bộ chọn được chỉ định:

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

nhà phát triển.mozilla

Giống như trong câu trả lời khác, InternalHTML và InternalText không được khuyến nghị, tốt hơn nên sử dụng textContent . Thuộc tính này được hỗ trợ tốt, bạn có thể kiểm tra nó: http://caniuse.com/#search=textContent

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

điều này sẽ chọn nút dom với id myspanvà thay đổi nội dung văn bản thànhnew text

Bạn có thể làm

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

Đối với khoảng này

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

Bạn có thể đi như thế này: -

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