兄弟节点
node.nextSibling//下一个兄弟节点 但是包括了空格
node.previousSibling//上一个兄弟节点 但是包括了空格
node.nextElementSibling//下一个兄弟元素节点
node.previousElementSibling//上一个兄弟元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<script>
var div=document.querySelector('div');
// nextSibling 下一个兄弟节点 但是包括了空格
console.log(div.nextSibling);
console.log(div.previousSibling);
// nextElementSibling 下一个兄弟元素节点
console.log(div.nextElementSibling)
console.log(div.previousElementSibling)
</script>
</body>
</html>
如何解决兼容性问题 ？ie9以上可以使用nextElementSibling
自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
} 创建节点
document.createElement('tagName')
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在， 是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
添加节点
1. node.appendChild(child) node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。
2. node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>123</li>
</ul>
<script>
// 创建节点 元素节点
var li=document.createElement("li")
// 添加节点 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>
简单版发布留言案例
① 核心思路：点击按钮之后，就动态创建一个li，添加到ul 里面。
② 创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li
③ 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</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('你没有输入内容')
}else{
// 创建元素 添加元素
var li=document.createElement('li')
li.innerHTML=text.value;
// ul.appendChild(li);
ul.insertBefore(li,ul.children[0])
text.value=""
}
}
</script>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看