如何使用 JavaScript 更改 span 元素的文本？

关键词：

【中文标题】如何使用 JavaScript 更改 span 元素的文本？【英文标题】：How do I change the text of a span element using JavaScript? 【发布时间】：2010-11-24 10:25:39 【问题描述】：

如果我有一个 span，说：

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

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

【问题讨论】：

【参考方案1】：

对于现代浏览器，您应该使用：

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

虽然较旧的浏览器可能不知道textContent，但不建议使用innerHTML，因为当新文本是用户输入时它会引入XSS 漏洞（有关更详细的讨论，请参阅下面的其他答案）：

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

【讨论】：

@bouncingHippo document.getElementById("myspan").setAttribute("style","cssvalues"); 应该有某种方式将这两个答案合并为一个。它的答案完全相同。 这并没有设置 text，它设置了 HTML，这是完全不同的。 @gregoire - 正如其他人已经指出的那样，您的答案容易受到 XSS 的攻击。这个问题已经被浏览了大约 80k 次，这意味着很多人可能已经接管了这个解决方案，并且可能引入了不必要的 xss 泄漏。您是否可以考虑更新您的答案以改用textContent，以便鼓励新人使用正确且安全的方法？ @Tiddo textContent 在 IE8 及以下版本中不受支持，我希望您永远不要在脚本中直接使用未经处理的用户输入。【参考方案2】：

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

【讨论】：

如果'newtext'包含用户提供的输入，这将导致XSS漏洞。【参考方案3】：

使用 innerHTML 是不推荐。 相反，您应该创建一个 textNode。这样，您就可以“绑定”您的文本，并且至少在这种情况下，您不会容易受到 XSS 攻击。

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

正确的方法：

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

有关此漏洞的更多信息： Cross Site Scripting (XSS) - OWASP

2017 年 11 月 4 日编辑：

根据@mumush建议修改第三行代码：“使用appendChild();代替”。 顺便说一句，根据@Jimbo Jonny，我认为应该通过应用分层安全原则将所有内容视为用户输入。这样你就不会遇到任何意外。

【讨论】：

虽然您对 innerHTML 需要谨慎是绝对正确的，但请注意您的解决方案使用了 Firefox 不支持的 innerText。 quirksmode.org/dom/html 它还使用了 IE8 不支持的 textContent。您可以构建代码来解决这些问题。 改用span.appendChild(txt);！ 这个问题没有说明用户输入，所以不推荐innerHTML 的笼统声明是荒谬的。更不用说它在消毒后仍然很好。应该清理用户输入的想法与这个特定问题不相关。最多在结尾处写一个小注释：“顺便说一句：如果是用户输入，请确保先清理或使用不需要它的 X 方法”。 使用 appendChild 并没有真正改变文本，它只是增加了文本。在此处使用您的代码，原始问题的跨度最终将变为“hereismytextyour cool text”。也许span.innerHTML = ""; 然后appendChild？ @JimboJonny 在谈到诸如此类已被浏览超过 650,000 次的问题时，OP 具体提出的问题完全无关紧要。因此，为了公共安全，我认为在突出位置提及 XSS 漏洞是谨慎的做法。【参考方案4】：

编辑：这是在 2014 年写的。你可能不再关心 IE8 并且可以忘记使用 innerText。只需使用 textContent 就可以了，万岁。

如果您是提供文本的人，并且用户（或您无法控制的其他来源）没有提供任何文本的任何部分，那么设置 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';

但是，正如其他人指出的那样，如果您不是文本字符串任何部分的来源，如果您不小心先正确清理文本，使用 innerHTML 可能会使您遭受 XSS 等内容注入攻击。

如果您使用来自用户的输入，这是一种安全的方法，同时还能保持跨浏览器的兼容性：

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

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

如果您想尽可能避免回流（由innerText 引起）：

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

【讨论】：

【参考方案5】：

这是另一种方式：

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

if (myspan.innerText) 
    myspan.innerText = "newtext";

else
if (myspan.textContent) 
        myspan.textContent = "newtext";   

Safari、Google Chrome 和 MSIE 将检测到 innerText 属性。对于 Firefox，标准的做事方式是使用 textContent，但从 45 版开始，它也有一个 innerText 属性，正如最近有人告诉我的那样。此解决方案测试浏览器是否支持这些属性中的任何一个，如果支持，则分配“newtext”。

现场演示：here

【讨论】：

Firefox 在 release 45 中实现了 innerText 支持。【参考方案6】：

我使用Jquery，但以上都没有帮助，我不知道为什么，但这有效：

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

【讨论】：

【参考方案7】：

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

【讨论】：

【参考方案8】：

对于这个跨度

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

你可以这样：-

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

【讨论】：

【参考方案9】：

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

这将选择 id 为 myspan 的 dom-node 并将其文本内容更改为 new text

【讨论】：

【参考方案10】：

除了上面的纯javascript答案外，您还可以使用jQuery text 方法如下：

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

如果您需要扩展答案以获取/更改 html span 或 div 元素的内容，您可以这样做：

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

参考资料：

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

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

【讨论】：

【参考方案11】：

您也可以使用 querySelector() 方法，假设 'myspan' id 是唯一的，因为该方法返回具有指定选择器的第一个元素：

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

developer.mozilla

【讨论】：

【参考方案12】：

你可以的

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

【讨论】：

和我给出的答案有什么不同？【参考方案13】：

(function ($) 
    $(document).ready(function()
    $("#myspan").text("This is span");
  );
(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="myspan"> hereismytext </span>

用户 text() 更改跨度文本。

【讨论】：

【参考方案14】：

我用过这个document.querySelector('ElementClass').innerText = 'newtext';

似乎适用于跨度、类/按钮中的文本

【讨论】：

【参考方案15】：

出于某种原因，似乎使用“文本”属性是大多数浏览器的方式。 它对我有用

$("#span_id").text("要分配的文本值");

【讨论】：

Mohamed Nagieb 和 Rayees AC 已经提出了相同的解决方案。 这里使用jQuery而不是纯javascript【参考方案16】：

不能用于 HTML 代码插入，例如：var a = "get the file <a href='url'>the link</a>"var b = "get the file <a href='url'>another link</a>"var c = "get the file <a href='url'>last link</a>"

使用document.getElementById("myspan").textContent=a; 开启<span id="myspan">first text</span>

带有计时器，但它只是将参考目标显示为文本而不运行代码，即使它确实在源代码上正确显示。如果 jquery 方法不是真正的解决方案，请使用：

document.getElementById("myspan").innerHTML = a to c; 是让它发挥作用的最佳方式。

【讨论】：

如何使用 JavaScript 更改元素的类？

】如何使用JavaScript更改元素的类？【英文标题】：HowcanIchangeanelement\'sclasswithJavaScript?【发布时间】：2010-09-1619:02:38【问题描述】：如何更改HTML元素的类以响应onclick或使用JavaScript的任何其他事件？【问题讨论】："class属性主要... 查看详情

如何使用 JavaScript 更改元素的类？

】如何使用JavaScript更改元素的类？【英文标题】：HowcanIchangeanelement\'sclasswithJavaScript?【发布时间】：2010-09-1619:02:38【问题描述】：如何更改HTML元素的类以响应onclick或使用JavaScript的任何其他事件？【问题讨论】："class属性主要... 查看详情

是否可以使用 JavaScript 来更改页面的元标记？

】是否可以使用JavaScript来更改页面的元标记？【英文标题】：IsitpossibletouseJavaScripttochangethemeta-tagsofthepage?【发布时间】：2011-02-0320:31:24【问题描述】：如果我在头部放置一个div并显示：none，而不是使用JavaScript显示它，这会起作... 查看详情

如何使用 jQuery 更改 <span> 标签 </span> 之间的值？

】如何使用jQuery更改<span>标签</span>之间的值？【英文标题】：HowcanIchangethevaluebetween<span>tag</span>usingjQuery?【发布时间】：2017-05-2017:31:56【问题描述】：我正在开发小型ASP.NETMVC应用程序，该应用程序正在为登录... 查看详情

如何使用 JavaScript 从元标记中获取信息？

】如何使用JavaScript从元标记中获取信息？【英文标题】：HowdoIgettheinformationfromametatagwithJavaScript?【发布时间】：2011-11-2309:16:31【问题描述】：我需要的信息在一个元标记中。property="video"时如何访问元标签的"content"... 查看详情

如何使用 javascript 定位 li 中的元素

】如何使用javascript定位li中的元素【英文标题】：Howtotargetelementsinliwithjavascript【发布时间】：2021-12-2322:12:45【问题描述】：这是一段javascript代码，例如我想更改嵌套在li中的span中的文本。我如何使用DOM来定位这些元素？varbody=do... 查看详情

如何使用 JavaScript 将脚本、链接和元标记附加到头部？

】如何使用JavaScript将脚本、链接和元标记附加到头部？【英文标题】：Howtoappendscript,link,andmetatagsontoheadusingJavaScript?【发布时间】：2014-11-3001:06:27【问题描述】：我得到如下输出，如何使用JavaScript将整个附加到head标签中？<meta... 查看详情

如何通过 Javascript 读取元数据内容？ [复制]

】如何通过Javascript读取元数据内容？[复制]【英文标题】：HowtoreadmetadatacontentviaJavascript?[duplicate]【发布时间】：2018-11-0922:02:34【问题描述】：<metaitemprop="price"content="175.03">我想在这种情况下读取元标记的内容我想要使用javasc... 查看详情

如何使用 PHP 或 JavaScript 在网页正文中显示描述元标记的内容？

】如何使用PHP或JavaScript在网页正文中显示描述元标记的内容？【英文标题】：HowcanIuseeitherPHPorJavaScripttodisplaythecontentsofthedescriptionmetataginthebodytextofawebpage?【发布时间】：2021-01-0219:39:07【问题描述】：我的网站以包含元信息、页面... 查看详情

在 Javascript 中使用跨度和符号更改 HTML [重复]

】在Javascript中使用跨度和符号更改HTML[重复]【英文标题】：ChangingHTMLwithspansandsymbolsinJavascript[duplicate]【发布时间】：2021-06-2211:42:15【问题描述】：我有一些HTML，当调用一个函数时，我想更改为使用span的div中的文本。这个想法是... 查看详情

如何使用 Javascript 保存 CSS 更改？

】如何使用Javascript保存CSS更改？【英文标题】：HowcanIsaveCSSchangeswithJavascript?【发布时间】：2018-01-1921:46:29【问题描述】：我创建了一个页面，人们可以在其中使用javascript自行更改背景。但是当我在页面之间交换时，设置就消失... 查看详情

如何使用javascript更改按钮文本

】如何使用javascript更改按钮文本【英文标题】：Howtochangethebuttonstextusingjavascript【发布时间】：2011-10-2512:53:22【问题描述】：我有以下代码通过javascript代码设置按钮的文本，但它不起作用它保持不变，文本保持不变。functionshowFil... 查看详情

如何在 Javascript AutoDesk 中获取模型对象元数据属性

】如何在JavascriptAutoDesk中获取模型对象元数据属性【英文标题】：HowtogetModelobjectmetadatapropertiesinJavascriptAutoDesk【发布时间】：2018-11-1701:01:23【问题描述】：我正在使用带有离线svf文件的Javascript中的AutoDeskForgeViewer(2D)。我已将.dwg... 查看详情

如何通过 url 参数更改打开的图形元标记内容

】如何通过url参数更改打开的图形元标记内容【英文标题】：Howtochangeopengraphmetatagcontentviaurlparams【发布时间】：2021-05-0621:39:14【问题描述】：我正在尝试使用url参数和打开图形元标记来制作自定义嵌入生成器，但是每当我将链... 查看详情

在VUE中切换语言时如何更改头部元数据？

】在VUE中切换语言时如何更改头部元数据？【英文标题】：howtochangeheadmetadatawhenswitchthelanguageinVUE?【发布时间】：2019-05-0620:25:02【问题描述】：还有人问这个问题吗？如果是，请给我阅读这个问题的链接，如果不是，怎么做？我... 查看详情

如何使用 javascript 更改视频标签海报属性？

】如何使用javascript更改视频标签海报属性？【英文标题】：Howchangethevideotagposterattributewithjavascript?【发布时间】：2012-10-0108:17:26【问题描述】：我想使用原生JavaScript或jQuery来更改HTML视频标签上的海报属性。任何帮助将不胜感激... 查看详情

如何使用 javascript 更改 CSS？ [关闭]

】如何使用javascript更改CSS？[关闭]【英文标题】：howcanichangeCSSusingjavascript?[closed]【发布时间】：2013-08-1904:56:15【问题描述】：我想当我点击右上角的雨滴时，其他人会旋转，但我对javascript和jquery一无所知！我知道css！到目前为... 查看详情

如何使用javascript更改内联另一个元素的样式？

】如何使用javascript更改内联另一个元素的样式？【英文标题】：Howtochangethestyleofanotherelementinlineusingjavascript?【发布时间】：2017-06-2814:50:21【问题描述】：我想使用javascript在html元素中更改另一个元素的样式。我已经使用下面的代... 查看详情