节点操作之创建和添加节点

1.创建节点

document.createElement('tagName')

document.createElement() 方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据需要动态生成的，所有也称之为动态创建元素节点。

2.添加节点

1.node.appendchild（child）

node.appendchild（）方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素。

2.node.insertBefore（child，指定元素）

node.insertBefore（）方法将一个节点添加到父节点的指定节点前面，类似于css里面的before伪元素。

代码入下：

<body><ul><li>5641</li></ul><script>//给ul添加li，如果原来的ul有li，则在后面追加元素//1.创建元素节点let li= document.createElement('li');//2.添加节点 node是父级  child是子级let ul=document.querySelector('ul');ul.appendChild(li);//3.添加节点 node.insertBefore（child，指定元素）;let lili=document.createElement('li');ul.insertBefore(lili,ul.children[0]);//4.在页面添加一个新元素：1.创建元素 2.添加元素</script>
</body>

节点操作之创建和添加节点相关推荐

JavaScript文档对象模型DOM节点操作之创建和添加节点（5）
得出结论:创建元素节点后,必须要把刚创建的元素节点添加到相应的元素下,否则不会在页面出现示例代码: <!DOCTYPE html> <html><head>< ...
js DOM节点操作之创建、添加、删除和克隆节点
1. 创建节点 document.createElement("tagName"):tagName为HTML标签名,创建一个标签名为tagName的元素节点. <body&g ...
java document创建节点_javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点...
DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...
appendChild+insertBefore：创建和添加节点
创建和添加节点 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
【JS】创建和添加节点示例
创建和添加节点示例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
JS节点操作（1） - 父节点，子节点，兄弟节点
节点操作的作用获取元素通常使用的两种方式: 1. 利用DOM提供的方法获取元素 document.getElementById() document.getElementsByTagName() d ...
JS节点操作小结(创建节点,添加节点,获取节点,删除节点,复制节点)
一,创建节点 document.createElement('li'),//创建一个节点二,添加节点 insertBefore(要添加的节点, 添加在哪个节点之前) 在指定节点前面添加三,获取节点 ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
js的DOM节点操作：创建，插入，删除，复制，查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

节点操作之创建和添加节点

节点操作之创建和添加节点相关推荐

最新文章

热门文章