重庆网站建设公司价格,注册深圳公司需要多少钱,免费网页设计作业成品大一,淄博logo设计公司1. js添加、删除DOM元素
1.1. 添加DOM元素
1.1.1. appendChild()方法 该方法添加的元素位于父元素的末尾#xff0c;使用方法#xff1a; parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器#xff0c;NewNode是新添加的元素 创建一个li元素并添加到…1. js添加、删除DOM元素
1.1. 添加DOM元素
1.1.1. appendChild()方法 该方法添加的元素位于父元素的末尾使用方法 parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器NewNode是新添加的元素 创建一个li元素并添加到ul的末尾 var ulDom document.getElementById(ul_id);var htmlStr //div classmember-li-layout οnclickclickFunc(${index})div classmember-li-layoutdiv classmember-item-layoutspan classmember-item-layout姓名/spanspan classmember-item-content${item.name}/span/div div classmember-item-layoutspan classuserName班级/spanspan classmember-item-content${item.classroom}/span/div /div;var liDom document.createElement(li);liDom.setAttribute(class, member-li-body);liDom.setAttribute(data-name, item.name);liDom.innerHTML htmlStr;ulDom.appendChild(liDom);1.1.2. insertBefore()方法 该方法可以将元素添加到指定位置使用方法 // parentNode是需要添加元素的容器NewNode是新添加的元素, beforeNode是添加在哪个元素之前 parentNode.insertBefore(newNode, beforeNode) 创建一个li元素并添加在第二个li元素之前
const ulNode document.querySelectorAll(.list)[0],liNodes document.querySelectorAll(.item),liNode document.createElement(li);
liNode.className item;
liNode.innerHTML 4;
ulNode.insertBefore(liNode, liNodes[1]);1.2. 删除DOM元素
1.2.1. removeChid()方法 该方法用于删除指定元素使用方法 parentNode.removeChild(removeNode) // parentNode是需要删除元素的容器removeNode是要删除的元素 // //方法一删除自身// var boxdocument.getElementById(ul_id);// box.remove();//方法二删除子节点var ulDom document.getElementById(ul_id);var lis ulDom.querySelectorAll(li);for (i lis.length; i 0; i--) {ulDom.removeChild(lis[i - 1]);};1.2.2. remove()方法 // //方法一删除自身/var boxdocument.getElementById(ul_id);// box.remove();1.3. 示例代码
1.3.1. page-dom.html
!doctype html
html
headmeta charsetutf-8title点赞/titlemeta nameviewport contentwidthdevice-width, initial-scale1,maximum-scale1,user-scalablenometa nameapple-mobile-web-app-capable contentyesmeta nameapple-mobile-web-app-status-bar-style contentblackscript typetext/javascript src../static/js/init-rem.js/scriptlink relstylesheet typetext/css href../static/css/mui.min.css/script typetext/javascript src../static/js/mui.min.js/scriptlink relstylesheet typetext/css href../static/css/base.css/link relstylesheet typetext/css href../css/page-dom.css/script typetext/javascript src../static/js/jquery-3.1.1.min.js/script
/head
body
section classbase-title-layout2div classbase-title-bar2span classbase-title-back onclickhistory.go(-1)img src../img/icon/icon_back.png//spanh1dom/h1a classbase-title-back/a/div
/section
div classbase-page-layoutul idul_id classmember-ul-body/ul
/div
script typetext/javascript src../js/page-dom.js/script
/body
/html
1.3.2. page-dom.css .member-ul-body {overflow-x: hidden;
}
.member-ul-body li {border-radius: 0.2rem;margin: 0.2rem 0.01rem;padding: 0.2rem 0.2rem;
}
.member-li-body {background: #fff;
}
.member-li-layout {overflow: hidden;display: flex;flex-direction: column;
}
.member-item-layout {display: flex;flex-direction: row;align-items: center;margin: 0.05rem 0;
}
.member-item-title {color: black;text-align: center;font-size: 0.3rem;
}.member-item-content {color: #666666;text-align: center;font-size: 0.3rem;
}
.member-bottom-layout {display: flex;display: -webkit-flex;flex-direction: row;align-items: center;justify-content: space-between;-webkit-align-items: center;padding: 0 0.3rem;
}
1.3.3. page-dom.js
let myArr
$(function () {getData()
});function getData() {//获取json中数据$.getJSON(../json/domJson.json,function (res) {myArr res.rows;myArr.forEach(function (item, index) {var ulDom document.getElementById(ul_id);var htmlStr //div classmember-li-layout οnclickclickFunc(${index})div classmember-li-layoutdiv classmember-item-layoutspan classmember-item-layout姓名/spanspan classmember-item-content${item.name}/span/div div classmember-item-layoutspan classuserName班级/spanspan classmember-item-content${item.classroom}/span/div /div;var liDom document.createElement(li);liDom.setAttribute(class, member-li-body);liDom.setAttribute(data-name, item.name);liDom.innerHTML htmlStr;ulDom.appendChild(liDom);})//详情goDetail()//清除数据//clearData()})
}/*** 点击item*/
function clickFunc(index) {console.log(name: myArr[index].name)
}
/*** 清除数据*/
function clearData() {// //方法一删除自身// var boxdocument.getElementById(ul_id);// box.remove();//方法二删除子节点var ulDom document.getElementById(ul_id);var lis ulDom.querySelectorAll(li);for (i lis.length; i 0; i--) {ulDom.removeChild(lis[i - 1]);}
}/*** 详情*/
function goDetail() {var lis document.querySelector(#ul_id).querySelectorAll(li);for (i 0; i lis.length; i) {//点击itemlis[i].addEventListener(tap, function () {var name $(this).attr(data-name);console.log(name: name)});}
}1.3.4. domJson.json
{msg: 信息,code: 200,rows: [{name: 云兮,classroom: 一年级4班},{name: 晨曦,classroom: 二年级1班},{name: 佳宁,classroom: 三班2班}]
}
1.4. 效果图
