089_DOM节点动态创建、添加和删除

1. 创建节点

1.1. 创建元素

document.createElement(tagName);

1.2. 创建文本

document.createTextNode("这是新文本。");

2. 添加节点

2.1. appendChild()方法, 追加新元素作为父的最后一个子。

parentElement.appendChild(newElement);

2.2. insertBefore()方法, 在父元素的子元素前插入一个元素。

parentElement.insertBefore(newElement, childElement);

3. 删除节点

3.1. removeChild()方法, 从父元素中删除一个节点。

3.2. 很遗憾, DOM需要同时了解您需要删除的元素及其父。

parentElement.removeChild(childElement);

3.3. 这是一种常见的解决方法: 找到你想要删除的子, 并利用其parentNode属性找到父:

childElement.parentNode.removeChild(childElement);

4. 替换节点

4.1. replaceChild()方法, 从父元素中替换一个子。

childElement.parentNode.replaceChild(newElement, oldElement);

5. 属性节点

5.1. 创建属性

var attr = document.createAttribute(attributename);
// 给属性赋值
attr.value = 'test'

5.2. setAttributeNode()方法用于添加新的属性节点。如果元素中已经存在指定名称的属性, 那么该属性将被新属性替代。如果新属性替代了已有的属性, 则返回被替代的属性, 否则返回NULL。

element.setAttributeNode(attributenode)

5.3. getAttributeNode()方法从当前元素中通过名称获取属性节点。

element.getAttributeNode(attributename)

5.4. removeAttributeNode()方法从元素中删除指定的属性节点。该方法从当前元素的属性集合中删除(并返回一个)Attr节点。用removeAttribute()方法代替该方法往往会更简单。

element.removeAttributeNode(attributenode)

6. 例子

6.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>DOM节点动态创建、添加和删除</title></head><body><div id="div1"><p>我是第一个p节点</p><p>我是第二个p节点</p></div><div id="div2">删除我</div><div id="div3">替换我</div><script type="text/javascript">var div1 = document.getElementById('div1');var preP = document.createElement('p');// 创建文本var textPreP = document.createTextNode('我是前置p');preP.appendChild(textPreP);// 创建属性var idAttr = document.createAttribute("id");idAttr.value = 'preP';preP.setAttributeNode(idAttr);div1.insertBefore(preP, div1.firstChild);var div2 = document.getElementById('div2');div2.parentNode.removeChild(div2);var div3 = document.getElementById('div3');var divReplace = document.createElement('div');// 创建文本var replaceText = document.createTextNode('我是被替换的');divReplace.appendChild(replaceText);// 添加属性divReplace.setAttribute('id', 'divReplace');div3.parentNode.replaceChild(divReplace, div3);document.write(div1.firstChild.removeAttributeNode(idAttr).value + '<br />');document.write(divReplace.getAttributeNode('id').value + '<br />');// 动态在head标签中添加cssvar headStyle = document.getElementsByTagName("head")[0].appendChild(document.createElement("style"));headStyle.type = "text/css";headStyle.textContent = "p { background-color: red; height: 40px; line-height: 40px; } div { background-color: green;}";</script></body>
</html>

6.2. 效果图

089_DOM节点动态创建、添加和删除相关推荐

JS 动态创建元素、删除元素、替换元素、修改元素
动态创建元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
js动态创建元素和删除
动态创建元素的三种方式: 一.document.write(): 功能:向body的最后添加一段结构: 参数:字符串: 用法:document.write('这是内容<div>这是div& ...
【web前端】JavaScript DOM元素(节点的创建appendChild()，删除removeChild()，修改replaceChild())
创建新的 HTML 元素 (节点) - appendChild() 实例: <!DOCTYPE html> <html><head><meta charset ...
JQuery实现动态表格(添加、删除、遍历)
遍历表格逻辑 1.浏览器会自动把所有行tr使用tbody标签包裹起来 2.使用childern()获取当前元素的所有儿子标签 3.table表格需要两个childern才能获取到所有tr行,若一个ch ...
jQuery根据当前节点元素找到父子、兄弟节点元素进行添加或删除
目录 1.查找父子.兄弟节点元素 1)父级 2)子级 3)同级 2.添加删除选中的dom元素 jQuery根据ID删除元素 jquery的删除属性的方法 1.查找父子.兄弟节点元素在操作DOM元素的 ...
JavaScript学习笔记：创建、添加与删除节点
JavaScript学习笔记:创建.添加与删除节点文章目录 JavaScript学习笔记:创建.添加与删除节点一.DOM对象节点类型二.创建节点 1.创建元素节点 2.创建文本节点 3.创建属性 ...
Winform中对自定义xml配置文件进行Xml节点的添加与删除
场景 Winform中自定义xml配置文件后对节点进行读取与写入: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10053213 ...
b站 4天从零玩转jQuery【黑马程序员】部分案例代码_表格添加和删除案例
这个是两个视频的内容写在一起了 1.下午07-案例-表格删除 2.下午10-案例-动态数据添加和删除应该就是这两个视频. <!DOCTYPE html> <html>< ...
jquery的DOM节点操作(创建和插入元素节点)
1.创建元素节点 2.插入节点动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来. 按照元素的层次关系来分,可以分为内部和外部两种方法元素内部插入子节点元素内部插入子节点有两种 ...

089_DOM节点动态创建、添加和删除

089_DOM节点动态创建、添加和删除相关推荐

最新文章

热门文章