Làm thế nào để thay đổi nội dung của một phần tử span trong JavaScript

Question

Nếu tôi có một khoảng thời gian, nói:

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

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

Answer 1

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

EDIT Đối với các trình duyệt hiện đại:

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

Answer 2

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

Answer 3

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 bạn và bạn không, ít nhất trong trường hợp này, dễ bị tấn công XSS.

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

Cách đúng:

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

Sửa 04 Tháng 11 năm 2017:

Modified dòng thứ ba của mã theo @mumush gợi ý: "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 kỳ điều bất ngờ nào.

Answer 4

Nếu bạn là người cung cấp các văn bản và không có phần nào của văn bản được cung cấp bởi người sử dụng (hoặc một số nguồn khác mà bạn không kiểm soát), sau đó thiết lập innerHTML là tốt:

// * 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 innerHTML có thể khiến bạn bị tấn công nội dung như XSS nếu bạn không cẩn thận để khử trùng văn bản trước.

Nếu bạn đang sử dụng đầu vào từ người sử 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 qua trình duyệt:

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

Firefox không hỗ trợ innerText và IE8 không hỗ trợ textContent nê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 các trình duyệt.

Và nếu bạn muốn tránh chỉnh lại dòng (do innerText) nếu có thể:

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

Answer 5

Dưới đâ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 innerText sẽ được phát hiện bằng Safari, Google Chrome và MSIE . Đối với Firefox, cách làm việc 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 innerText, như một người nào đó vui lòng apprised tôi gần đây.Giải pháp này kiểm tra xem trình duyệt có hỗ trợ một trong các thuộc tính này hay không và nếu có, hãy gán "newtext".

Live Demo: here

Answer 6

tôi sử dụng Jquery và không có ở trên giúp, tôi không biết tại sao nhưng điều này làm việc:

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

Answer 7

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

Answer 8

Đối với khoảng thời gian này

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

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

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