JavaScript--修改 HTML 元素

这些是一些用于修改 HTML 元素的常见方法:

1、document.createElement(element):创建 HTML 元素节点。可以使用这个方法创建一个新的 HTML 元素,
例如 document.createElement('div') 将创建一个 <div> 元素节点。

2、document.createAttribute(attribute):创建 HTML 属性节点。可以使用这个方法创建一个新的 HTML 属性节点,
例如 document.createAttribute('class') 将创建一个表示 class 属性的属性节点。

3、document.createTextNode(text):创建 HTML 文本节点。可以使用这个方法创建一个包含指定文本的 HTML 文本节点,
例如 document.createTextNode('Hello, world!') 将创建一个包含文本 'Hello, world!' 的文本节点。

4、元素节点.removeChild(element):删除 HTML 元素。这个方法用于从父元素中移除指定的子元素。需要操作父元素节点调用该方法,
例如 parentElement.removeChild(childElement)。

5、元素节点.appendChild(element):添加 HTML 元素。这个方法用于将一个元素节点作为子元素添加到另一个元素节点中。需要操作父元素节点调用该方法,
例如 parentElement.appendChild(newChildElement)。

6、元素节点.replaceChild(element):替换 HTML 元素。这个方法用于将一个元素节点替换掉另一个元素节点。需要操作父元素节点调用该方法,
例如 parentElement.replaceChild(newElement, oldElement)。

7、元素节点.insertBefore(element):在指定的子节点前面插入新的子节点。这个方法用于在指定子元素之前插入一个新的子元素。需要操作父元素节点调用该方法,
例如 parentElement.insertBefore(newChildElement, referenceChildElement)。

 示例:

<!DOCTYPE html>
<html>
<head><title>我的HTML页面</title>
</head>
<body><div id="myDiv"><p>你好,世界!</p></div><script>// 创建元素节点var newElement = document.createElement('h1');newElement.textContent = '欢迎访问我的网站!';// 创建属性节点var newAttribute = document.createAttribute('class');newAttribute.value = 'heading';// 创建文本节点var newText = document.createTextNode('这是一个段落。');// 获取父元素节点var parentElement = document.getElementById('myDiv');// 删除子元素节点var childElement = document.querySelector('p');parentElement.removeChild(childElement);// 添加子元素节点parentElement.appendChild(newElement);// 替换元素节点var oldElement = document.querySelector('h1');var replacementElement = document.createElement('h2');replacementElement.textContent = '欢迎访问我的更新网站!';parentElement.replaceChild(replacementElement, oldElement);// 在指定子节点前插入新的子节点var referenceChild = parentElement.firstChild;parentElement.insertBefore(newText, referenceChild);</script>
</body>
</html>

 运行结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/22848.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【探索AI未来】人工智能技术在软件开发中的应用与革新

自我介绍⛵ &#x1f4e3;我是秋说&#xff0c;研究人工智能、大数据等前沿技术&#xff0c;传递Java、Python等语言知识。 &#x1f649;主页链接&#xff1a;秋说的博客 &#x1f4c6; 学习专栏推荐&#xff1a;人工智能&#xff1a;创新无限、MySQL进阶之路、C刷题集、网络安…

postgresql还原bak

1、第一步肯定是要新建自己还原的目标数据库&#xff0c;例如&#xff1a; 2、进入postgresql的安装目录下的bin目录下 然后地址栏输入cmd进入命令 输入以下 psql -h localhost -U postgres -p 5432 -d SamsinoYardStandard_karamay -f "D:\desktop\zk\20230628.bak&quo…

VQA评测evaluation代码:gqa / aokvqa / vqav2 / scienceQA

VQA评测分多种&#xff0c;这里提几种&#xff0c;代码参考来自lavis和mmpretrain。 一、gqa评测&#xff08;只有一个answer&#xff09; 数据集下载及格式&#xff1a; blip中json地址 图片下载 # gqa格式已重新整理&#xff0c;特点是每个question对应的gt_answers只有一…

Python自动化之pytest常用插件

目录 1、失败重跑 pytest-rerunfailures 2、多重校验 pytest-assume 3、设定执行顺序 pytest-ordering 4、用例依赖&#xff08;pytest-dependency&#xff09; 5.分布式测试(pytest-xdist) 6.生成报告&#xff08;pytest-html&#xff09; 1、失败重跑 pytest-rerunfailu…

Unity游戏源码分享-Unity5.4.1打砖块游戏Breakout_Game_Starter_Kit

Unity5.4.1打砖块游戏Breakout_Game_Starter_Kit 童年的回忆 项目地址&#xff1a;https://download.csdn.net/download/Highning0007/88042779Unity游戏源码分享-

SpringCloud——消息总线Bus

SpringCloud Bus将分布式系统的节点与轻量级消息系统链接起来的框架&#xff0c;是对SpringCloud Config的加强&#xff0c;广播自动版的配置。 支持两种消息代理&#xff1a;RabbitMQ和Kafka 一、创建工程&#xff0c;添加依赖 spring-cloud-starter-config spring-cloud-st…

(转载)从0开始学matlab(第1天)—变量和数组

MATLAB 程序的基本数据单元是数组。一个数组是以行和列组织起来的数据集合&#xff0c;并且拥有一个数组名。数组中的单个数据是可以被访问的&#xff0c;访问的方法是数组名后带一个括号&#xff0c;括号内是这个数据所对应行标和列标。标量在 MATLAB 中也被当作数组来处理——…

centos 配置好网络后无法ping 通百度

问题&#xff1a; ping 自己配置的ip地址能够ping通&#xff0c;ping 连接的WiFi &#xff08;可以上外网&#xff09;地址也能ping通&#xff0c;但是ping www.baidu.com 却ping不同&#xff1b; 配置 处理方法&#xff1a; 我的虚拟机开通了三张网卡&#xff0c;150段…

GB35114双向身份认证(A级)学习笔记

GB35114双向身份验证学习笔记 温故而知新 SSL单向认证 摘录自&#xff1a;https://blog.csdn.net/qq_45759354/article/details/128672828 SSL协议用到了对称加密和非对称加密&#xff0c;在建立连接时&#xff0c;SSL首先对对称加密密钥使用非对称加密。连接建立好后&…

【量化课程】02_1.宏观经济学基础概念

2.1_宏观经济学基础概念 文章目录 2.1_宏观经济学基础概念1. 宏观经济简单背景1.1 微观经济学时期1.2 宏观经济学开端1.3 宏观经济学研究的问题1.4 宏观经济与理财的联系 2. 宏观经济分析及关键指标2.1 教材中的宏观经济分析框架和指标2.1.1 国内生产总值GDP2.1.2 边际消费倾向…

Docker:overlay2浅析以及解决overlay2 文件过大的问题

最近在学习docker的实现时看到这么一个概念&#xff1a;Union File System&#xff0c;先让我们来介绍介绍它。 Union File System 定义&#xff1a;联合文件系统&#xff08;UnionFS&#xff09;是一种分层、轻量级并且高性能的文件系统&#xff0c;它支持对文件系统的修改作…

微信小程序音频播放失败:TypeError: Cannot read property ‘duration‘ of undefined

报错截图 最下面这个this.setData()报错可不用理会&#xff0c;是this取值的问题 解决 需要播放和暂停功能时&#xff0c;需要把audio以及他的src放在Page外面。不能缺少 audioCtx.onPlay() 和 audioCtx.onError()两个方法&#xff0c;且需要放在play()方法之前如果在wx.crea…