JavaScript增加节点案例

一般情况下，我们新增节点，按照如下操作：创建一个新的节点，再把创建的新的节点放入到指定元素内部。

增加节点思路

增加节点分为两个步骤：

1、创建元素节点

语法：元素.creatElement('标签名')

2、追加节点

创建的元素节点不会显示在页面中，要想在界面看到，还得插入到某个父元素中。有两种追加给父元素的方法。（一定是追加给元素所以需要先获取父元素）

<1> 插入到父元素的最后一个子元素

语法：父元素.appendChild(子元素)

<2> 插入到父元素中某个子元素的前面

语法：父元素.InsertBefore(要插入的元素，在哪个元素前插入)

CSS页面代码如下：

ul {/* 隐藏黑点 */list-style: none;
}.box {width: 200px;height: 200px;transition: all 0.4s;
}.box:hover {box-shadow: 0 8px 8px 0 grey;transform: translate(0, -10px);
}.box-bd {margin: 20px 0 0 300px;width: 700px;
}li {/* 让li强制不换行 */float: left;    margin-right: 10px;list-style: none;}h4 {text-align: center;color:grey;font-family: "楷体";font-size: 15px;
}h3 {text-align: center;font-family: "微软雅黑";font-size: 20px;
}

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小刘鸭照片展示</title><link rel="stylesheet" href="index.css">
</head>
<body><div class="box-hd"><h3>小刘鸭生活照</h3><div class="box-bd"><ul></ul></div></div><script>let data =[{src:'./image/1.jpg',title:'小刘鸭生活照01',},{src:'./image/2.jpg',title:'小刘鸭生活照02',},{src:'./image/3.jpg',title:'小刘鸭生活照03',},{src:'./image/4.jpg',title:'小刘鸭生活照04',},{src:'./image/5.jpg',title:'小刘鸭生活照05',},{src:'./image/6.jpg',title:'小刘鸭生活照06',}] let ul = document.querySelector('ul')// 1、数据的长度来确定li的个数for(let i = 0; i < data.length; i++){let li = document.createElement('li')// 先准备好内容再追加li.innerHTML = `<img src=${data[i].src} class="box" alt=""><h4>${data[i].title}</h4>`// 追加给ul 父元素appendChild()ul.appendChild(li)}</script></body>
</html>

最终效果图如下：第一张照片后的其余照片都是通过父元素追加进来的

JavaScript增加节点案例相关推荐

oracle rac添加监听,【学习笔记】Oracle 10G RAC增加节点时手动注册监听服务的案例步骤...
[学习笔记]Oracle 10G RAC增加节点时手动注册监听服务的案例步骤时间:2016-10-22 22:53 来源:Oracle研究中心作者:HTZ 点击: 次天萃荷净 Ora ...
JavaScript的节点操作 —— 增加节点
目录 JavaScript中的节点操作分为:增.删.改.查(获取),四大类型. 我们直接利用案例来学习: HTML布局代码: JavaScript代码实现: 第一步:获取所有要用到的元素对象(可以利用 ...
js在指定的td中插入html元素,js在指定位置增加节点函数insertBefore()用法实例
本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点具体代码 ...
javaScript中createElement案例
javaScript中createElement案例 <!DOCTYPE html> <html> <head> <meta charset="UT ...
jenkins 手动执行_Jenkins环境配置篇-增加节点
作为持续集成的利器Jenkins已经得到了广泛地应用,仅仅作为一个工具,Jenkins已然有了自己的生态圈,支持其的plugin更是超过1300+.在实际中如何使用以及如何更好地使用jenkins,一 ...
ORACLE RAC如何增加节点
ORACLE RAC系统是一个可以横向进行扩展的系统,当一个RAC系统计算能力不满足客户的需求时候,增加节点能够快速增加整个系统的计算能力,使得客户系统计算能力得到一定的提升,以满足客户不断增长的计算 ...
alwayson 增加节点_用于AlwaysON高可用性的域控制器和域客户端节点设置
alwayson 增加节点 In this series of AlwaysOn High availability configuration in SQL Server, I am going t ...
第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、查看/修改/删除属性节点、创建和增加节点）
一.查看节点 getElementById( ) 元素的ID名称来访问,返回对拥有指定id的第一个对象的引用 getElementsByName( ) 按元素的name名称来访问,返回带有指定名称的 ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第五章:"课程介绍"专栏-课后习题参考代码题目原型: 请结合给出的素材,运用列表标记,超链接标记以 ...

JavaScript增加节点案例

增加节点思路

CSS页面代码如下：

html代码如下：

JavaScript增加节点案例相关推荐

最新文章

热门文章