首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用纯JavaScript(无jQuery)为纯文本HTML添加元素到DOM

使用纯JavaScript为纯文本HTML添加元素到DOM的方法如下:

  1. 创建一个新的元素节点:
代码语言:javascript
复制
var newElement = document.createElement("div");
  1. 为新元素添加文本内容:
代码语言:javascript
复制
var textNode = document.createTextNode("这是一段纯文本内容");
newElement.appendChild(textNode);
  1. 将新元素添加到DOM中:
代码语言:javascript
复制
var parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);

完整的代码示例:

代码语言:javascript
复制
// 创建一个新的元素节点
var newElement = document.createElement("div");

// 为新元素添加文本内容
var textNode = document.createTextNode("这是一段纯文本内容");
newElement.appendChild(textNode);

// 将新元素添加到DOM中
var parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);

在这个示例中,我们首先创建了一个新的<div>元素节点,然后为其添加了一段纯文本内容。最后,我们将这个新元素添加到了ID为parent的元素中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery_T2_DOM操作

DOM操作的内容 jQueryDOM DOMjQuery对象  DOM样式添加 jQuery元素属性设置 toggle切换 ​编辑html()与text()区别 DOM添加图片 dom添加元素 克隆元素...jQueryDOM 使用 jQuery 选择器选择页面中的元素,是为了生成 jQuery 对象,jQuery 对象具有特有的方法和属性,完全能够实现传统 DOM 对象的所有功能 使用jQuery操作元素...使用选择器获取某个元素 使用jQuery对象的方法操作元素。...DOMjQuery对象  jQuery 对象转换成 DOM 对象 使用 jQuery 中的 get() 方法,其语法结构:get([index]) 如果get()方法不带参数,get()方法会返回所有匹配元素的...示例: 利用js的DOM修改颜色,使用jQuery对象修改文本内容 点击变颜色·变文字

7.8K20

全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

通过 DOMHTML 页面的解析,可以将页面元素解析元素节点、属性节点和文本节 点,这些解析出的节点对象,即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。...注意:在代码中的写的等标签不会在页面中显示,而是会在页面中执行,但是获取的文本内容中含有这个 $(选择器).html():参数调用方法,获取 DOM 数组第一个dom对象的在网页上显示的文本内容。...$(选择器).html(值):有参数调用,用于设置 DOM 数组中所有元素的在网页上显示的文本内容。...通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本HTML、XML 或 JSON 同时能够把接收的数据更新 DOM 对象。..."xml" - 一个 XML 文档 "html" - HTML 作为文本 "text" - 文本字符串 "json" - 以 JSON 运行响应,并以对象返回 语法格式:$.ajax({ data

5.8K10

jQuery入门前言

jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些JavaScript的操作,所以使用jQuery使用原生的JavaScript可以达到用更少的代码做更多的事的效果。...2、jQuery对象与DOM对象: jQuery对象与DOM对象是不一样的,看下面例子: 需求:我们要获取页面上这个idtest的p元素,然后给这个文本节点增加一段文字:“hello world”...image.png 2、.html()、.text()和.val(): 读取、修改元素html结构或者元素文本内容又或者操作表单字段value值是常见的DOM操作,jQuery针对这样的处理提供了...(如果有多个p标签,那么每一个p标签都会被替换成文本内容) ($(".demo p").text('taobao')); // 结果会把classdemo的div...四、DOM操作: 1、jQuery创建节点: var div = $("我是文本节点") $body.append(div) 这段代码就会在html的body中添加一个div节点,

2.7K30

前端页面替换文本的方法和一些小技巧

html 示例如下: Hide Javascript/jQuery 实现 使用 Javascript 或者 使用 jQuery...譬如在评论中,有读者说为什么不直接使用 $("button").text("Hide"); 这样子直接修改文本。这种做法虽然简单,但是使得数据一部分维护在 DOM、一部分维护在 Javascript。...CSS + Javascript Javascript 可以在用户行为发生时,仅仅修改 DOM 的 ClassName,借助于 CSS 来实现文本的替换。...首先,当目标 element 有 on 这个 Class 时,使用 :after 伪元素,给原 element 覆盖上一个新的文本。... CSS 实现 (最近几篇 blog 好像都喜欢给出 CSS 实现哈) 其实,在前端开发中,我们经常使用 :hover 等伪类,通过 CSS 来实现用户鼠标悬浮某一元素上时,元素样式的修改。

2.2K70

Vue.js框架中权衡的艺术

声明式框架:如vue,更关注结果,操作dom,修改dom的过程我们不用关心,vue去帮我们我们完成,我们只需要告诉框架我们需要什么样的东西 以一个操作dom的场景例子 获取一个dom\ 设置文本内容hello...world\ 其绑定点击事件\ 当点击时弹出ok ```js // jquery 实现 $('#app') // 获取div .text("hello world") // 设置文本内容 ....创建页面的性能 = 创建虚拟dom的计算量 + 创建真实DOM的计算量 innerHTML 虚拟DOM JavaScript运算 拼接html字符串 创建虚拟dom DOM构建 新建所有dom元素...新建所有dom元素 新建页面时,JavaScript运算和DOM构建层面相差不大,innerHTML 性能甚至优于 虚拟dom 当更新页面时 innerHTML 虚拟DOM JavaScript运算...dom 性能是很不错的,目前没有更好的方案 运行时和编译时的权衡 设计一个框架时,一般有三种选择 运行时 我个人理解,运行时,就比如jquery,或者和命令式框架写法相似 编译时 比如Svelte

1.7K20

jQuery 已经落幕了~

删除之后,13 个前端应用程序 JavaScript 大小减少了 32 KB(或 31% 49%)之间,其他多项性能提升,团队部分技术债得以清除。...通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性,并对其中的内容进行修改和删除、创建新的元素等等。...在 jQuery 之前,使用 JavaScript 操作 DOM 需要定义一个函数,然后将其绑定特定 DOM 中的各种 HTML 元素中,这对于日常使用来说非常繁琐和复杂。...另一方面,在 JavaScript 开发中,开发者需要检查浏览器使用何种方式添加事件,然后再做选择,但是 jQryue 提供了隐藏了不同浏览器的 JavaScript 实现之间的一些不兼容性,可以自行检查浏览器需要什么方式...在 2010 年左右,微软和 Google 都在他们的 CDN 网络中 jQuery 库提供托管;Media Temple 竭尽全力捐助托管 jQuery 网站;微软也参与jQuery 的测试和开发工作中

61220

「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

jam - 使用以浏览器中心且与RequireJS兼容的存储库的包管理器。 jspm - 摩擦浏览器包管理。 恩德 - 库图书馆。 volo - 从模板创建前端项目,添加依赖项并自动生成项目。...pageguide - 使用jQuery和CSS3的网页元素的交互式指南。 hopscotch - 一个框架,使开发人员可以轻松地将产品导览添加到他们的页面。...joyride - jQuery feature tour插件。 focusable - 设置聚焦于DOM元素的聚光灯,将叠加层添加到页面的其余部分。...jQuery-Tags-Input - 使用这个jQuery插件将一个简单的文本输入神奇地转换为一个很酷的标签列表。 vanilla-masker - JavaScript掩码输入。...jquery.vibrate.js - Vibration API Wrappers list.js - 表,列表和各种HTML元素添加搜索,排序,过滤器和灵活性。构建不可见并处理现有HTML

6.6K21

「沙里淘金」精选浏览器端JavaScript库资源推荐

jam - 使用以浏览器中心且与RequireJS兼容的存储库的包管理器。 jspm - 摩擦浏览器包管理。...pageguide - 使用jQuery和CSS3的网页元素的交互式指南。 hopscotch - 一个框架,使开发人员可以轻松地将产品导览添加到他们的页面。...joyride - jQuery feature tour插件。 focusable - 设置聚焦于DOM元素的聚光灯,将叠加层添加到页面的其余部分。...jQuery-Tags-Input - 使用这个jQuery插件将一个简单的文本输入神奇地转换为一个很酷的标签列表。 vanilla-masker - JavaScript掩码输入。...jquery.vibrate.js - Vibration API Wrappers list.js - 表,列表和各种HTML元素添加搜索,排序,过滤器和灵活性。构建不可见并处理现有HTML

5.8K20

awesome-javascript-cn

官网 paper.js:是矢量图形脚本中的瑞士军刀 —— 使用 HTML5 Canvas 将 Scriptographer  移植 JavaScript 官网和浏览器。...官网 pageguide:使用 jQuery 和 CSS3 的 web 页面元素交互引导库。官网 hopscotch:让开发者更容易向其页面产品添加引导的框架。...官网 joyride:基于 jQuery 的功能引导插件。官网 focusable:通过向页面其余部分添加遮罩层,使焦点聚集在特定 DOM 元素。...官网 vanilla-masker:一个 JavaScript 实现的输入控制库。官网 Ion.CheckRadio:一个复选框和单选按钮添加样式的 jQuery 库,支持多种皮肤。...官网 stretchy:自适应大小的 form 元素,表单本应该是这样的。官网 list.js:向表格、列表等 HTML 元素添加搜索、排序、过滤和自适应功能的库。在已有 HTML 上增加可视化。

10.7K80

react思维

即使现在,在HTML中直接使用onclick很不专业,原因如下:· •onclick添加的事件处理函数是在全局环境下执行的,这污染了全局环境,很容易产生意料不到的后果;•给很多DOM元素添加onclick...•onClick使用了事件委托(event delegation)的方式处理点击事件,无论有多少个onClick出现,其实最后都只在DOM树上添加了一个事件处理函数,挂在最顶层的DOM节点上。...'#show').text(count+1)}) 在jQuery的解决方案中,首先根据CSS规则找到idbtn的按钮,挂上一个匿名事件处理函数,在事件处理函数中,选中那个需要被修改的DOM元素,读取其中的文本值...与jQuery不同,用React开发应用是另一种体验,用React开发的ClickCounter组件并没有像jQuery那样做“选中一些DOM元素然后做一些事情”的动作。...虚拟dom(VirutalDOM) 浏览器为了渲染HTML格式的网页,会先将HTML文本解析以构建DOM树,然后根据DOM树渲染出用户看到的界面,当要改变界面内容的时候,就去改变DOM树上的节点。

1.3K20

jQuery 落幕了!

删除之后,13 个前端应用程序 JavaScript 大小减少了 32 KB(或 31% 49%)之间,其他多项性能提升,团队部分技术债得以清除。...通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性,并对其中的内容进行修改和删除、创建新的元素等等。...在 jQuery 之前,使用 JavaScript 操作 DOM 需要定义一个函数,然后将其绑定特定 DOM 中的各种 HTML 元素中,这对于日常使用来说非常繁琐和复杂。...另一方面,在 JavaScript 开发中,开发者需要检查浏览器使用何种方式添加事件,然后再做选择,但是 jQuery 提供了隐藏了不同浏览器的 JavaScript 实现之间的一些不兼容性,可以自行检查浏览器需要什么方式...在 2010 年左右,微软和 Google 都在他们的 CDN 网络中 jQuery 库提供托管;Media Temple 竭尽全力捐助托管 jQuery 网站;微软也参与jQuery 的测试和开发工作中

48210

好久不用 jQuery, 来复习一下

jQuery 凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。...("name"); // DOM 对象 var $jquery = $(dom); // jQuery 对象 1.2 jQuery 选择器   jQuery 选择器允许对 HTML 元素组或单个元素进行操作...1.3 DOM 操作 1.3.1 内容操作 操作 说明 html() 获取/设置元素的标签体内容 text() 获取/设置元素的标签体文本内容 val() 获取/设置元素的 value 属性值 1.3.2...1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾 prependTo() 对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头 after() 添加元素元素后边对象...在 HTML 文档里,一个元素调用 hide() 方法,会将该元素的 display 样式改为 “none”。

5.5K40

JavaScript资源大全中文版(Awesome最新版)

focusable - 将聚焦点放在DOM元素上,将叠加层添加到页面的其余部分。 Notifications通知 messenger - 您的应用程序的咆哮式警报和消息。...jQuery-Tags-Input -使用这个jQuery插件将简单的文本输入法转换成酷标签列表。 vanilla-masker -JavaScript屏蔽输入。...Countable - 一个JavaScript函数,用于向HTML元素添加实时的段落,字和字符计数。 card - 使您的信用卡在一行代码中更好地形成。...circletype - 一个jQuery插件,可以让您在网络上进行曲线 slabText - 一个jQuery插件,用于制作大而大胆和敏感的标题 simple-text-rotator -添加一个超简单的旋转文本您的网站...jquery.vibrate.js - 振动API包装机 list.js - 将搜索,排序,过滤器和灵活性添加到表格,列表和各种HTML元素

15.1K112

AJAX 请求常用参数(cache、dataType、processData、contentType)

可用值: xml 返回 XML 文档,可用 jQuery 处理。 html 返回文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。...script 返回文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。...(因为将使用 DOM 的 script标签来加载) json 返回 JSON 数据 。 jsonp 使用 JSONP 形式调用函数时,如 "myurl?callback=?"...jQuery 将自动替换 ? 正确的函数名,以执行回调函数。...text 返回文本字符串 processData 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型

1.1K10

JavaScript的理解记录(5)

---接上篇: 三、DOM解析:     1、Document Object Model(DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element...类库中的()相似,两者参数相同,不同的是:()返回值一个JQuery对象表示匹配的元素集,JQuery对象是一个类数组,可以用标准的数组标示方括号来访问JQuery对象的内容;也可以用toArray(...、组合使用:span.fatal.error //其class中包含fatal和error的所元素;     3、 文档结构:作为节点树的解析(还有一种是作为元素树解析,将文档看做Element...浏览器不支持)          textContent: 返回文本;IE不支持          innerText:也是返回文本,但不返回元素的内容;FireFox不支持;...         其二:设置对应元素JavaScript contenteditable属性;         浏览器定义了多项文本编辑命令,为了执行这些命令,应该使用Document

1.4K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券