如何更改JavaScript中的span元素的文本

If I have a span, say:

如果我有一个跨度，说:

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

How do I use JavaScript to change "hereismytext" to "newtext"?

如何使用JavaScript将“hereismytext”更改为“newtext”?

8 个解决方案

#1

435

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

EDIT For modern browsers :

编辑现代浏览器:

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

#2

Using innerHTML is SO NOT RECOMMENDED. Instead, you should create a textNode. This way, you are "binding" your text and you are not, at least in this case, vulnerable to an XSS attack.

不建议使用innerHTML。相反，应该创建一个textNode。通过这种方式，您正在“绑定”您的文本，并且您并不(至少在本例中)容易受到XSS攻击。

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

The right way:

正确的方式:

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

For more information about this vulnerability: Cross Site Scripting (XSS) - OWASP

有关此漏洞的更多信息:跨站脚本编制(XSS) - OWASP

Edited nov 4th 2017:

编辑2017年11月4日:

Modified third line of code according to @mumush suggestion: "use appendChild(); instead".
Btw, according to @Jimbo Jonny I think everything should be treated as user input by applying Security by layers principle. That way you won't encounter any surprises.

根据@mumush的建议修改第三行代码:“使用appendChild();相反”。顺便说一下，根据@Jimbo Jonny的说法，我认为所有的东西都应该被作为用户的输入，通过层的原则来应用安全。这样你就不会遇到任何意外。

#3

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

#4

If you are the one supplying the text and no part of the text is supplied by the user (or some other source that you don't control), then setting innerHTML is fine:

如果您是提供文本的人，而用户没有提供文本的任何部分(或其他一些您无法控制的源)，那么设置innerHTML就可以了:

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

However, as others note, if you are not the source for any part of the text string, using innerHTML can subject you to content injection attacks like XSS if you're not careful to properly sanitize the text first.

但是，正如其他人注意到的，如果您不是文本字符串的任何部分的源，那么如果您不小心首先对文本进行适当的清理，那么使用innerHTML可能会使您遭受像XSS这样的内容注入攻击。

If you are using input from the user, here is one way to do it securely while also maintaining cross-browser compatibility:

如果您正在使用来自用户的输入，这里有一种方法可以安全地进行输入，同时还可以保持跨浏览器的兼容性:

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

Firefox doesn't support innerText and IE8 doesn't support textContent so you need to use both if you want to maintain cross-browser compatibility.

Firefox不支持innerText, IE8不支持textContent，所以如果你想保持跨浏览器兼容性，你需要同时使用这两种工具。

And if you want to avoid reflows (caused by innerText) where possible:

如果您想避免反射(由内文引起)，在可能的情况下:

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

#5

I use Jquery and none of the above helped, I don't know why but this worked:

我用的是Jquery，上面的方法都没用，我不知道为什么，但是这个方法是有效的:

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

#6

Here's another way:

这是另一种方式:

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

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

The innerText property will be detected by Safari, Google Chrome and MSIE. For Firefox, the standard way of doing things was to use textContent but since version 45 it too has an innerText property, as someone kindly apprised me recently. This solution tests to see if a browser supports either of these properties and if so, assigns the "newtext".

innerText属性将由Safari、谷歌Chrome和MSIE检测。对于Firefox来说，标准的做法是使用textContent，但是自从45版以来，它也有一个innerText属性，最近有人好心地告诉我。这个解决方案测试浏览器是否支持这些属性，如果支持，则分配“newtext”。

Live demo: here

现场演示:

#7

Like in other answer, innerHTML and innerText are not recommended, it's better use textContent. This attribute is well supported, you can check it this: http://caniuse.com/#search=textContent

与其他答案一样，不建议使用innerHTML和innerText，最好使用textContent。这个属性得到了很好的支持，您可以检查它:http://caniuse.com/#search=textContent

#8

-1

For this span

这个跨度

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

You can go like this :-

你可以这样说:-

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

#1

435

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