DOM - 创建带文本的元素节点

元素节点操作的方法
DOM不单单可以查找节点,也可以创建节点、复制节点、插入节点、删除节点和替换节点
我们分别来看一下:
1.write  //我们常用的document.write();
例如我们这有一个按钮,我们点击按钮想要浏览器中出现对应的文字
运行结果如下:
【注】但是我们可以看到这种方法它是会覆盖掉原有的所有样式
所以第一种方法我们并不支持使用
我们通过下面的方法来进行更改内容
2.clearElement();  //创建元素节点
格式:document.createElement( 标签名 );
运行结果如下:
当我们点击按钮时,会弹出对话框显示创建成功了
但是,我们来看一下源代码,并没有span这个标签,是因为我们只是创建了该节点
以上就只是创建节点
2.appendChild();  //插入
格式:parent.appendChild( newNode );
功能:将newNode插入到parent子节点的末尾
我们在div中先加上p和em标签,方便显示插入的标签节点位置:
运行结果如下:
当我们点击按钮以后,按F12看源码就会发现在em标签后多了一个span标签
以上两步就是创建、插入节点
但是span节点里面并没有文本,如果我们想在span插入文本就需要下面的属性了
3.createTextNode( );  //插入文本内容
格式:document.createTextNode( 文本 );
功能:创建一个文本节点
运行结果如下:
当我们点击按钮后,添加了文本内容,看源码可以看出是在span中添加的
以上三步就是创建、添加文本、插入节点
上面三步都是通过不同的节点来进行创建、添加和插入的
那我们想一下,为什么不能直接创建一个带文本的节点呢?
对于这个方法,我们只能去封装函数
运行结果如下:
可以看出,点击按钮几次,就添加了几个span标签,并且包含文本内容
★★★同样,我们不要忘了封装函数完了之后将它放在我们之前封装函数的tool.js文件中,方便以后的使用!
- 写作不易,大家多多关注,谢谢啦-
---web分享,分享的不只是web
(0)

相关推荐

  • 深入学习SAP UI5框架代码系列之三:HTML原生事件 VS UI5 Semantic事件

    这是Jerry 2020年的第80篇文章,也是汪子熙公众号总共第262篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) ...

  • JavaScript基础-07-DOM

    JavaScript基础-07-DOM

  • 常见DOM操作

    文章目录 概述 DOM常用操作 事件 this的用法 创建节点 删除节点 概述 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接 ...

  • JavaScript之DOM操作

    DOM简介 是什么?    DOM,全称 Document Object Model,文档对象模型. 做什么?    dom 对象就是将标签封装成的 js 对象,而 JavaScript 中内置提供的 ...

  • jQuery从入门到放弃

    概念 jQuery 是一个高效.精简并且功能丰富的 JavaScript 工具库.它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作.事件处理.动画和 Ajax 操作更加简 ...

  • jQuery核心函数$的四种用法

    jQuery核心函数$的四种用法 1.传入参数为 [ 函数 ] $(function () {//在文档加载完之后执行这个函数 } //此方法与window.onload = funnction(){ ...

  • HTML+CSS+JS详解 | w3c笔记

    Web概述 Web三要素:浏览器,服务器,HTTP协议 HTML工作原理:HTML是部署在服务器上的文本文件,根据HTTP协议浏览器发出请求给服务器,服务器做出响应给浏览器返回一个HTML,浏览器解释 ...

  • DOM - 元素节点属性及Attribute

      元素节点属性  我们继续来看元素节点属性 ownerDocument 属性  功能:返回该节点的文档对象根节点.相当于document 一般就直接用document了,这个用的很少 我们来了解证实 ...

  • DOM - 元素节点属性

      元素节点属性  childNodes和firstChild和lastChild 1.childNodes  //获取当前元素节点的所有的子节点 举个小例子: 运行结果返回了一个节点列表: 节点列表 ...

  • Excel中如何对多张图片或者文本框元素进行快速排版?

    在Excel中对多张图片或者文本框元素进行快速排版非常简单,并不需要一个一个地拖,而且拖动的时候还老是对不齐.以一个简单的例子说明如下:一.统一图形或文本框高度.宽度通过格式菜单右侧的"高度 ...

  • excel如何根据销售数据创建带数据标记的折线图​

    在excel中,如何根据销售数据创建带数据标记的折线图呢? 打开一个"销售汇总表",如图所示. 单击选中表格中的所有数据,如图所示. 单击工具栏上的插入-全部图表,如图所示. 插入 ...

  • 干货 | 如何创建带参数例行程序(实用型)

    特别说明 今天小辫辫要带你 利用带参数例行程序画一个小圈圈, 把你圈住和我一起学习 (●ˇ∀ˇ●) 坐稳啦,小辫辫要带你开车咯 <~嘟~嘟~嘟~> 在例行程序声明中可以加入参数,在调用该程 ...

  • 漫威正式回应《尚气》辱华问题:傅满洲问题不容原谅,电影并不带任何侮辱元素

    一直以来,<尚气与十环传奇>关于原作涉嫌辱华的话题一直在媒体间传播,许多营销号和路人也因此对该作和相关演员大肆辱骂,而漫威官方的闭麦也使得这种声音变得更加刺耳,但近日漫威影业总裁凯文·费奇 ...

  • 如何创建带跳转动态网址的二维码

    如何创建跳转动态网址的二维码?如何创建带跳转动态网址的二维码?如何创建带LOGO的二维码?如何制作二维码.防伪二维码? 分享一个快速教程,只需要3个步骤,便可生成数以百万计的二维码,拿出手机轻轻扫一扫 ...

  • JavaScript封装函数:获取下一个/上一个兄弟元素节点

    要求: 获得下一个/上一个兄弟元素节点,不包括文本节点等 解决IE兼容性问题 代码实现: 获得下一个兄弟元素节点: function getNextElement(element) { var el ...

  • 让Excel批量创建带超链接的工作表目录

    让Excel批量创建带超链接的工作表目录 工作中总会遇到包含多个工作表的工作簿,很多人都在想这时候如果能有一个目录,不但能显示出所有的工作表名称,还能够链接跳转到指定的工作表,该有多好呀...... ...