JavaScript增加节点案例

铃儿响叮当不响

已于 2022-07-14 14:31:29 修改

阅读量1.7k

点赞数 1

分类专栏：前端js笔记文章标签： HTML JavaScript DOM操作动态加载节点追加

于 2022-07-12 20:04:15 首次发布

本文链接：https://blog.csdn.net/qq_36507046/article/details/125749265

版权

前端js笔记专栏收录该内容

44 篇文章 7 订阅

订阅专栏

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

增加节点思路

增加节点分为两个步骤：

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>

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