通过 DOM 将文本添加到 JavaScript 中的现有文本元素

2024-02-20

我想弄清楚如何将文本添加到p tag or h1已经有文本节点的标签。

例如:

var t = document.getElementById("p").textContent;
var y = document.createTextNode("This just got added");

t.appendChild(y);
<p id="p">This is some text</p>

这段代码给出了一个错误appendChild不是一个函数。大多数帮助页面首先创建一个p标记,然后附加文本。

将文本添加到现有文本元素的正确方法是什么?

PS:我用过innerHTML之前这样做,但出于学习目的,我想在这里避免这样做。


原因是appendChild不是一个函数是因为你正在执行它textContent你的p元素。

您只需选择段落本身,然后将新的文本节点附加到该段落:

var paragraph = document.getElementById("p");
var text = document.createTextNode("This just got added");

paragraph.appendChild(text);
<p id="p">This is some text</p>

然而,如果您愿意,您可以只修改文本本身(而不是添加新节点):

var paragraph = document.getElementById("p");

paragraph.textContent += "This just got added";
<p id="p">This is some text</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过 DOM 将文本添加到 JavaScript 中的现有文本元素 的相关文章

  • Chrome/Firefox 中双美元符号选择器查询功能的来源是什么?

    Check 这个jsfiddle http jsfiddle net T2PMc 并查看控制台 没有定义 现在 打开一个全新的窗口 然后输入 进入控制台 它定义了一个函数 用于获取与选择器匹配的所有 dom 元素的 类似 jquery 的
  • 首选的客户端路由解决方案? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 组织 jQuery/JavaScript 代码的最佳方式 (2013) [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 问题 这个答案之前已经回答过 但已经
  • 让 GTM 代码在 Web 应用程序上运行

    我们公司的职业 工作网站使用第三方服务 允许用户提交职位发布申请 最初 用户登陆一个与 GTM 完美集成的外部平台 在 CMS 中 您可以轻松地将 GTM 代码添加到标题和正文区域 然而 一旦用户点击职位描述上的 应用 他们就会被重定向到一
  • Javascript - 删除粘贴上的空格

    我有一个最大长度为 10 的输入文本字段 该字段用于澳大利亚电话号码 10 位数字 电话号码通常分为以下语法 12 12345678 如果有人复制上面的内容并将其粘贴到我的输入字段中 显然会留下最后一位数字并保留空格 有没有办法在粘贴到输入
  • LitElement 不更新列表中的复选框

    我有一个简单的清单 每个项目都有一个删除按钮 当我选中第一个项目然后删除它时 列表会更新 删除该项目 但会选中下一个项目的复选框 下一项的属性是正确的 这是我的代码 import LitElement html from lit eleme
  • 如何使用 JavaScript 访问 runat="server" ASP 元素?

    似乎每个人都在这样做 在代码帖子等中 但我不知道如何 每当我尝试使用 JavaScript 操作 asp 元素时 我都会得到一个 element is null or document is undefined 等等错误 JavaScrip
  • req.body 为空 Express js

    我花了几个小时试图找出为什么 req body 是空的 我在 stackoverflow 上到处查看并尝试了所有方法 但没有运气 Express js POST req body 空 https stackoverflow com ques
  • JavaScript - 如何通过键盘使用 onclick 函数

    我有 HTML 和 JavaScript 代码
  • 如何限制注册用户尝试投票两次[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我对 php 编码和网站设计非常陌生 我正在尝试开发一个在线投票系统 只允许注册用户投票 已完成所有操作并且工作正常 但我需要的帮助是
  • underscore.js 中断路器的重要性是什么? [复制]

    这个问题在这里已经有答案了 In 下划线 js http underscorejs org docs underscore html 有这样的代码 if iterator call context obj keys i keys i obj
  • 获取顶部框架的 URL

    在 Facebook 应用程序中 我需要检查顶部框架 主窗口 URL 是什么 并相应地显示内容 我尝试使用以下内容 if top location toString toLowerCase indexOf facebook com lt 0
  • 如何从嵌套 FormGroup 添加/删除 FormControl

    candidateForm FormGroup constructor private fBuilder FormBuilder ngOnInit this candidateForm this fBuilder group fname n
  • 仅在文件下载完成后设置 cookie。

    我有一个场景 我想告诉用户下载完成并提示关闭按钮 为此 我使用 jquery 插件来连续监视 cookie 以了解下载何时完成 我的问题是我想设置这个cookie fileDownload true and path 下载完成后立即进行 为
  • Google Maps API v3 在地图加载后不会禁用滚轮

    我正在网站上实现谷歌地图 一切都工作得很好 除了地图加载后我似乎无法禁用滚轮 如果我在地图加载之前将选项设置为scrollwheel false 则滚轮将被禁用 但如果我稍后尝试执行此操作 我有一个启用 禁用滚轮的复选框 以下是我在页面加载
  • 为什么闭包编译器不缩短这个?

    我不确定这只是一个错误还是一个预期的功能 基本上 我有这个微小的功能 我现在看到end这里是蓝色的 但这工作得很好 如果我将其重命名为其他名称 我仍然遇到问题 function f a b var start Math min a b va
  • 你可以推荐什么 JavaScript 缓存 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个好的javascript内存缓存库来缓存客户端计算结果 我的要求 适用于 Internet Explorer FireFox
  • 利用源映射的堆栈跟踪

    概述 浏览器控制台中的堆栈跟踪输出与调用 Error stack 时返回的跟踪不同 控制台堆栈跟踪似乎考虑了源映射 而 Error stack 堆栈跟踪则没有 控制台输出这是输出到控制台的默认堆栈跟踪 Uncaught TypeError
  • 矩形描边上的单击事件

    我想仅在矩形的笔划上添加单击事件 并避免在矩形内部单击 下面是代码 var stage new Kinetic Stage container container width 578 height 200 var layer new Kin
  • 如何使用 PHP 读取/显示 XML

    有没有办法使用 PHP 读取 external xml 来自不同网站的 xml 文件 我知道有一种方法可以使用 JavaScript 读取 XML 但前提是它们都位于同一根目录中 您能否提供有关如何获取 xml 文件的示例 然后阅读以下内容

随机推荐

  • 重写泛型类的方法时发生名称冲突

    我试图理解使用以下代码得到的名称冲突错误 import java util import javax swing class Foo
  • 删除截断行末尾的字形

    当在启用了截断行的终端中使用 Emacs 23 时 Emacs 会在每行末尾添加一个美元符号 指示文本继续超出屏幕边缘 这让我很困扰 我想禁用此功能或以某种方式隐藏美元符号 这可能吗 如果是的话会怎样做 尝试用这个 set display
  • 2D 基本运动 UNITY

    目前我的角色在键盘上完美运行 但是当我通过 3 个 UI 按钮将你的动作转换为触摸时 我也尝试过 UI 图像 但成功了 我没有成功 它基本上是向右 向左 跳跃 应该如何做才能使其遵循以下说明 当用户按下方向键时 角色不会停止行走 直到用户释
  • C/C++编译器反馈优化

    有没有人看到过不同程序的真实世界数字 这些程序使用 C C 编译器提供的反馈优化来支持分支预测 缓存预加载功能等 我搜索了它 令人惊讶的是 即使是流行的解释器开发小组似乎也没有检查过效果 将 ruby python php 等性能提高 10
  • Kafka-node突然从偏移量0开始消费

    有时 kafka node 消费者从偏移量 0 开始消费 而其默认行为是仅消费较新的消息 然后它不会切换回默认行为 您知道如何解决这个问题以及会发生什么以及其行为突然发生变化吗 代码非常简单 并且无需更改代码即可完成此操作 var kafk
  • 实体框架 4 的存储库模式

    我曾经使用带有存储库接口的 NHibernate 在 EF 中使用此模式的正确方法是什么 我如何实现这个存储库接口RepositoryBase
  • 打开 Word 文档并使用 PowerShell 指定编码

    我试图告诉 PowerShell 打开一个文本文件并选择某个编码选项 默认情况下 在 Word 中手动打开此文本文件时 它会尝试使用日语编码打开它 因此无法正确显示某些字符 我尝试了很多不同的方法 但没有任何效果 所以我完全陷入困境 该文本
  • 如何展平嵌套 div 以在 CSS 网格中显示它们?

    我从一个应该有两列宽的对象生成一个表 使用 vue js 每列都来自对象的键和值 这相当于以下实际 HTML div div div this is something long on the first row div div short
  • 如何在 C 程序中将日志逻辑与业务逻辑分离?那么在 C++ 中呢?

    我目前正在使用 C 进行编码 并且有很多 printf 以便有时可以跟踪应用程序的流程 问题是 有时我想要比其他人更多的细节 所以我通常花时间注释 取消注释我的 C 代码 这样我就可以获得适当的输出 使用 Java 或 C 时 我通常可以使
  • Rust:从 std::Rc 智能指针向量实现迭代器

    我从 Rust 开始 我已经面临数据所有权的问题 我想实现一个名为的通用结构Port
  • 使用链表实现优先级队列

    我已经使用链表实现了优先级队列 在这个优先级队列中 最小的int值具有最高的值 因此通过调用remove方法 最小的方法将被删除 节点类代码 public class Node public int iData public Node ne
  • C#中的委托和C++中的函数指针有什么区别? [复制]

    这个问题在这里已经有答案了 可能的重复 c 中有函数指针吗 https stackoverflow com questions 2738850 are there function pointers in c 我有兴趣找出两者之间的区别de
  • 与 libQt5Core 的链接

    我使用在线安装程序安装了 Qt5 4 在 ubuntu 14 上运行 我正在尝试编译我的 C 源代码并链接到 libQt5Core 但 ld 抛出错误 make g Wall test o Party o Communication o F
  • (de)使用 System.Text.Json 序列化流

    我正在尝试使用将对象序列化为 MemoryStreamSystem Text Json JsonSerializer 我无法在文档中找到其实现 方法 有人可以分享使用 System Text Json 进行序列化和反序列化的示例实现吗 UP
  • 使用 LINQ 模拟 SQL Server 2012 Lag Window 函数

    我有一些示例数据 如下所示 编辑 我没有 SQL Server 2012 create table base pat id int admission date date discharge date date go insert into
  • 使用 oauth2 和 AngularJS 在 Web API 中向令牌发送附加参数

    我有一个用 AngularJS 编写的应用程序 它通过 oauth 2 联系 Web API 进行身份验证 该核心部分一切正常 但我需要传递其他参数来评估登录 clientID 并设置记住我类型功能 记住 从 Angular 方面来看 它看
  • Nunit - 没有发现测试[没有错误消息]

    单元拒绝在程序集中发现或运行我的测试 这并不是 Unit 产生 无法在程序集中找到测试 之类的错误消息的情况 它根本没有发现我有测试 我右键单击测试方法 测试输出显示 发现测试开始 发现测试已完成 0 发现 0 00 00 0260026
  • log4net 停止记录时如何接收事件

    Log4net 有点太擅长不抛出错误了 我正在尝试创建某种处理程序 如果 log4net 无法启动或死亡并且无法再记录 则会触发该处理程序 我知道应用程序设置键可以打开 log4net 的内部调试 log4net Internal Debu
  • 更改 actions-on-google websimulation 的语言或用德语测试 google home

    我正在通过 api ai 使用 google 上的操作 我能够用英语以外的语言创建 api ai 机器人 但是 actions on google 的网络模拟器 https developers google com actions too
  • 通过 DOM 将文本添加到 JavaScript 中的现有文本元素

    我想弄清楚如何将文本添加到p tag or h1已经有文本节点的标签 例如 var t document getElementById p textContent var y document createTextNode This jus