正文

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

 2023-02-24  108

关键词：

【中文标题】在 Javascript 中使用跨度和符号更改 HTML [重复]【英文标题】：Changing HTML with spans and symbols in Javascript [duplicate] 【发布时间】：2021-06-22 11:42:15 【问题描述】：

我有一些 HTML，当调用一个函数时，我想更改为使用 span 的 div 中的文本。这个想法是一种定制的警报。我正在尝试使用 .innerHTML，但我想要更改的内容既有引号又有跨度。有没有办法让我更新这个？

当前 HTML：

<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

这显示了一个带有图片的框

“我需要更新这个代码并保留引用和关键字！”

我目前的 javascript 是：

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = ""This <span class="keyWord">code</span> needs to change!"";

它不允许我添加额外的引号或 span 元素。

生成的文本应该是

“此代码需要更改！”

【问题讨论】：

Escape quotes in JavaScript 不正确。那是关于转义标记（属性）中的引号而不是转义要在字符串中使用的引号。 【参考方案1】：

方法 1 - 反斜杠转义

使用反斜杠 \ 字符转义 HTML 字符串中的双引号：

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = "\"This <span class=\"keyWord\">code</span> needs to change!\"";

<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

延伸阅读：String - JavaScript | MDN#Escape Notation

方法 2 - 使用模板字符串

通过将字符串封装在反引号字符中，将其声明为模板文字：

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = `"This <span class="keyWord">code</span> needs to change!"`;

<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

延伸阅读：Template literals (Template strings) - JavaScript | MDN

方法 3 - 单引号 (`'`) 封装

在这种特殊情况下，由于您没有在字符串中的任何位置使用单引号，您可以通过将 HTML 字符串封装在单引号字符中来简单地声明它。 请注意，如果由于某种原因您的文本更改为包含单引号，这将中断，这将迫使您按照方法 1 中的详细说明转义它们。

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = '"This <span class="keyWord">code</span> needs to change!"';

<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

【讨论】：

所以你没有找到任何重复的？【参考方案2】：

您需要像这样使用反斜杠 \ 来“转义”特殊字符（在您的情况下为双引号）

alertChange.innerHTML = "\"This &lt;span class=\"keyWord\"&gt;code&lt;/span&gt; needs to change!\"";

【讨论】：

如何在表格中添加标题和跨度

...-0316:55:30【问题描述】：这是现有的HTML，是的，开发人员使用了嵌套表格，我无法更改现有的HTML，但我需要替换表格类，然后仅在主表格中添加标题和跨度。<tableclass="two_column_layout"align="center"><tbody><tr> 查看详情

根据所选选项 javascript 动态更改跨度文本

】根据所选选项javascript动态更改跨度文本【英文标题】：Dynamicallychangespantextbasedonselectedoptionjavascript【发布时间】：2019-01-0419:28:03【问题描述】：我正在尝试根据选择的选项动态更改跨度的文本。PS：我正在使用Django+Python来生成... 查看详情

如何在不使用任何图像项目符号或任何跨度标签的情况下通过 CSS 定义 OL/LI 列表中字符的颜色？

】如何在不使用任何图像项目符号或任何跨度标签的情况下通过CSS定义OL/LI列表中字符的颜色？【英文标题】：HowtodefinethecolorofcharactersinOL/LIlistsviaCSS,WITHOUTusinganyimagebulletsoranyspantag?【发布时间】：2014-01-2004:41:47【问题描述】：嗯... 查看详情

如何在android中删除GridLayout跨度计数更改动画？

】如何在android中删除GridLayout跨度计数更改动画？【英文标题】：HowtoremoveGridLayoutspancountchangeanimationinandroid?【发布时间】：2021-08-1008:29:15【问题描述】：我有一个RecyclerView和相关的Adapter类。我更改了GridLayoutManager的跨度计数。fun... 查看详情

更改跨度文本？ [复制]

...0:04【问题描述】：可能重复：HowdoIchangethetextofaspanelementinjavascript好吧，我已经为此搜索了很多答案，但仍然找不到。我确实发现没有用。基本上，我想要做的是使用JavaScript：在浏览器的栏中，而不是通过Greasemonkey或其他方式，... 查看详情

使用 APFS 在 macOS 中更改符号链接的时间戳？

】使用APFS在macOS中更改符号链接的时间戳？【英文标题】：ChangingthetimestampofasymlinkinmacOSwithAPFS?【发布时间】：2021-10-1710:33:31【问题描述】：根据touch的手册页，要更改符号链接上的时间戳，可以使用touch-h-tMMDDhhmmmylink。这在我的... 查看详情

更改 div 中跨度的可见性和大小分为两行

】更改div中跨度的可见性和大小分为两行【英文标题】：Changingvisibilityandsizeofspanindivbreaksintwolines【发布时间】：2018-07-1907:14:44【问题描述】：我有一个带有两个+和-按钮和一个隐藏输入的div。当我单击按钮时，输入中的值应该增... 查看详情

使用 CSS 更改带有复选框的跨度中的材质图标

】使用CSS更改带有复选框的跨度中的材质图标【英文标题】：changingmaterialiconinaspanwithcheckboxusingcss【发布时间】：2019-07-1222:05:36【问题描述】：我有一些复选框，它们的跨度中有材料图标。我希望材质图标与选中和未选中的不同... 查看详情

在 log4j2 模式布局中使用 Sleuth 跟踪和跨度 id

】在log4j2模式布局中使用Sleuth跟踪和跨度id【英文标题】：UseSleuthtrace-andspanidinlog4j2patternlayout【发布时间】：2020-01-2620:52:15【问题描述】：我想在log4j2中使用sleuth。因此我使用了.properties配置。问题是我无法使用我的模式布局将... 查看详情

更改跨度文本值 JavaScript/jQuery

】更改跨度文本值JavaScript/jQuery【英文标题】：ChangingspantextvalueJavaScript/jQuery【发布时间】：2021-09-0803:10:35【问题描述】：我正在尝试将ID="DNTCaptchaInputText-error"的跨度（请参见图片）作为目标，我希望能够将“此字段为必填项”... 查看详情

遍历 HTML div 并使用 JavaScript 或 jQuery 从子跨度中提取值

】遍历HTMLdiv并使用JavaScript或jQuery从子跨度中提取值【英文标题】：IteratethroughHTMLdivandextractthevaluefromachildspanusingJavaScriptorjQuery【发布时间】：2020-05-2402:52:15【问题描述】：如何在JavaScript中的嵌套div中找到值并隐藏div例如，如果... 查看详情

捏和缩放 RecyclerView 布局以动画和更改布局管理器跨度计数

...ncount【发布时间】：2021-02-0720:53:59【问题描述】：我需要使用动画更改RecyclerView的GridLayoutManager跨度计数，但是当用户在RecyclerViewLayout上进行捏合或缩查看详情

使用 WebDriver 和 Selenium 在类中获取跨度

】使用WebDriver和Selenium在类中获取跨度【英文标题】：GetspaninsideaclassusingWebDriverandSelenium【发布时间】：2019-05-1119:37:06【问题描述】：我试图在一个跨度内刮取一个人的名字。这个跨度在一个类中。按照HTML：<div><aclass="_32mo... 查看详情

在应用 Javascript 中更改经度和纬度时遇到问题

】在应用Javascript中更改经度和纬度时遇到问题【英文标题】：HavingtroublechanginglongitudeandlatitudeinappJavascript【发布时间】：2020-11-1513:17:23【问题描述】：我正在使用vanillajavascript创建一个天气应用程序，该应用程序的一个功能是单... 查看详情

如何使用 JavaScript 查找 INPUT 和 TEXTAREA 插入符号位置坐标？

】如何使用JavaScript查找INPUT和TEXTAREA插入符号位置坐标？【英文标题】：HowToFindINPUTAndTEXTAREACaretPositionCoordinatesUsingJavaScript?【发布时间】：2016-12-0517:57:06【问题描述】：我试图在JavaScriptHTMLDOMEvents之类的HTMLDOMEvents函数的type="text"的... 查看详情

使用三点跨度触发 DropDown

】使用三点跨度触发DropDown【英文标题】：UseThreeDotsspantotriggerDropDown【发布时间】：2020-05-2404:36:02【问题描述】：我正在使用react-bootstrap，并且有一个带有插入符号的按钮可以触发下拉菜单。但我需要使用垂直的3个点，而不是按... 查看详情

库中的预处理器符号并在使用库时更改符号值

】库中的预处理器符号并在使用库时更改符号值【英文标题】：Preprocessorsymbolinlibraryandchangethesymbolsvaluewhileusingthelibrary【发布时间】：2019-11-2013:08:01【问题描述】：我的Lib.h中有一个带有内联函数的库项目：staticinlinevoidDoStuff(void)... 查看详情

linux上创建和更改硬链接和符号链接

...别链接并知道它们的类型理解复制与链接文件之间的区别使用链接执行系统管理任务链接简介在存储设备上，文件或目录包含在一些数据块中。有关某个文件的信息包含在一个inode中，它记录了所有者、最后访问该文件的时间、... 查看详情

正文