js添加 删除 替换 插入节点所用的方法

简介: js添加 删除 替换 插入节点所用的方法

添加节点:

  • createElement(tagName) :创建一个指定类型的元素节点。
  • createTextNode(text) :创建一个包含指定文本的文本节点。
  • appendChild(node) :将节点添加到父节点的末尾。

示例代码:

const parent = document.getElementById('parent');
const child = document.createElement('div');
const text = document.createTextNode('Hello world!');
child.appendChild(text);
parent.appendChild(child);

删除节点:

  • parentNode.removeChild(node) :从父节点中删除指定的节点。

示例代码:

const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);

替换节点:

  • parentNode.replaceChild(newNode, oldNode) :用新的节点替换旧的节点。

示例代码:

const parent = document.getElementById('parent');
const oldChild = document.getElementById('oldChild');
const newChild = document.createElement('div');
const text = document.createTextNode('Hello world!');
newChild.appendChild(text);
parent.replaceChild(newChild, oldChild);

插入节点:

  • parentNode.insertBefore(newNode, referenceNode) :在参考节点之前插入新的节点。

示例代码:

const parent = document.getElementById('parent');
const referenceNode = document.getElementById('referenceNode');
const newChild = document.createElement('div');
const text = document.createTextNode('Hello world!');
newChild.appendChild(text);
parent.insertBefore(newChild, referenceNode);


相关文章
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-方法
文章通过示例代码讲解了JavaScript中如何给对象添加方法以及如何调用这些方法。
18 2
JavaScript基础知识-方法
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
15 1
JavaScript基础知识-数组的常用方法
|
2天前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
1天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
|
1天前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
|
2天前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法
|
2天前
|
JavaScript
JS数组合并的常用方法
JS数组合并的常用方法
|
15天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
20天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
42 0
|
20天前
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略:HTML5属性与JavaScript方法的无缝对接,让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法,利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证,并借助JavaScript处理复杂逻辑,如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证,同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
22 0