发表于： 2022-12-22 20:50:48
0 152
今天学习的js知识点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言发布练习</title>
<style>
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border-color: pink;
}
</style>
</head>
<body>
<!-- <textarea name="" id=""></textarea>-->
<!-- <button>发布</button>-->
<!-- <ul>-->
<!-- </ul>-->
<button>删除</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//1.获取元素
// var btn = document.querySelector('button');
// var text = document.querySelector('textarea');
// var ul = document.querySelector('ul');
// //2.注册事件
// btn.onclick = function () {
// if (text.value == '') {
// alert('您没有输入内容');
// return false;
// } else {
// // console.log(text.value);
// //(1) 创建元素
// var li = document.createElement('li');
// // 先有li 才能赋值
// li.innerHTML = text.value;
// //(2) 添加元素
// // ul.appendChild(li); //从上往下显示
// ul.insertBefore(li,ul.children[0]); //从下往上显示
// }
// }
//1.获得元素
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
//2.删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
btn.onclick = function () {
if(ul.children.length == 0) {
this.disable = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建节点</title>
</head>
<body>
<ul>
<li>123</li>
</ul>
<script>
//1.创建节点 元素节点
var li = document.createElement('li');
//2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组的push
var ul = document.querySelector('ul');
ul.appendChild(li);
//3. 添加节点 node.insertBefore(child, 指定元素) 前面追加元素
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
//4. 我们想要页面添加一个新的元素：1.创建元素 2.添加元素
</script>
</body>
</html>
返回列表
评论