javaScript节点_js 添加节点-优快云博客

本文链接：https://blog.youkuaiyun.com/2403_88639358/article/details/143639982

3.5、节点操作
3.5.1、创建节点
docment.createElement('节点')
参数：标签名字符串
这些元素原先不存在，是根据需求动态生成的，所以也成为动态创建元素节点，会将创建好的对象作为返回值返回
3.5.2、创建文本
document.createTextNode('文本')
参数：文本内容字符串，并将新的节点返回
3.5.3、添加节点
1、father.appendChild(child) 追加元素类似数组中的push()
将一个节点添加到指定父节点的子节点列表的末尾。类似css里面的after伪元素
2、father.insertBefore(child,指定元素)
将一个节点添加到父节点的指定子节点前面。类似css里面的before伪元素

<body>

<div id="box">
<p>段落</p>
</div>
<button>添加span</button>
<button>添加h1</button>
<script>
var btns = document.querySelectorAll("button");
var p = document.querySelector("p");
var box = document.getElementById("box");
//需求1
btns[0].onclick = function () {
// 1.1创建节点
var span = document.createElement("span");
// 1.2 创建文本内容
var spanTest = document.createTextNode("我是一个span");
//1.3将文本内容放入到span节点里
span.appendChild(spanTest);
// 1.2追加节点
box.appendChild(span);
};
//需求2
btns[1].onclick = function () {
// 2.1 创建节点
var h1 = document.createElement("h1");
//2.2创建h1文本内容
var h1Test = document.createTextNode("我是一个h1");
//2.3 将h1Test放入到节点内
h1.appendChild(h1Test);
//2.4 添加节点
box.insertBefore(h1, p);
};
</script>
</body>
3.5.4、替换节点
replaceChild()
-可以使用指定的子节点替换已有的子节点
-语法：父节点.replaceChild(新节点，旧节点)
3.5.5、删除节点
写法一、father.removeChild(child)
写法二、child.parentNode.removeChild(child)
可以在DOM中删除一个子节点，返回删除的节点

<body>

<button>按钮1</button>
<button>按钮2</button>
<ul>
<li>《红楼梦》</li>
<li>《三国演义》</li>
<li>《西游记》</li>
<li>《金瓶梅》</li>
</ul>
<script>
var btns = document.querySelectorAll("button");
var ul = document.querySelector("ul");
var jpm = ul.children[3];
btns[0].onclick = function () {
// 创建《水浒传》节点
var newLi = document.createElement("li");
var newLiTest = document.createTextNode("《水浒传》");
newLi.appendChild(newLiTest);
// 替换节点
ul.replaceChild(newLi, jpm);
};
btns[1].onclick = function () {
// 删除节点写法一
ul.removeChild(jpm);
// 删除节点写法二
// jpm.parentNode.removeChild(jpm);
};
</script>
</body>
3.5.6、克隆节点
node.cloneNode() 返回调用该方法的节点的一个副本
参数：布尔值,默认是false
false 只克隆节点本身，不克隆里面的子节点
true 拷贝节点，拷贝内容

<body>

<div id="box">box盒子</div>
<button>克隆</button>
<script>
var box = document.getElementById("box");
document.querySelector("button").onclick = function () {
// 克隆节点
// var newBox = box.cloneNode();
var newBox = box.cloneNode(true);
//添加克隆节点
box.parentNode.appendChild(newBox);
};
</script>
</body>
3.5.7、创建节点另外几种方式
（1）、element.innerHTML
允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML，可以解析html标签
（2）、 element.innerText
获取或设置元素的文本----以纯文本的方式直接显示，不可以解析html标签
（3）、document.write()
直接将内容写入页面的内容流，但是文档执行完毕，则会导致页面全部重绘

<body>

<button>获取</button>
<button>添加</button>
<ul>
<li>《红楼梦》</li>
</ul>
<script>
var btns = document.querySelectorAll("button");
var ul = document.querySelector("ul");
// 需求1
btns[0].onclick = function () {
var test1 = ul.innerHTML;
// console.log(test1, "test1");
var test2 = ul.innerText;
// console.log(test2, "test2");
};
//需求2
btns[1].onclick = function () {
// 第一种写法
// var li = document.createElement("li");
// li.innerHTML = "《水浒传》";
// ul.appendChild(li);
// 第二种写法
ul.innerHTML = "<li>《红楼梦》</li><li>《水浒传》</li>";
// document.write("<ul><li>《水浒传》</li></ul>");
};
</script>
</body>
（4）、insertAdjacentHTML() /əˈdʒeɪsnt/
insertAdjacentHTML() 是Element的API中的一个方法，可以将字符串文本转化为你想要的节点（Node），并且插入到你想要插入的位置中。而且它并不会向innerHTML一样会替换掉已有的节点，而是会插入到指定位置。
语法：element.insertAdjacentHTML(position,text)
参数1: position
顾名思义，就是想要插入的位置，一共有4个固定的值
○'beforebegin'：元素element自己的前面。
○'afterbegin'：插入到元素element里面的第一个子节点之前（也就是总是会插入到最前面，例如我插入5个节点，顺序是1、2、3、4、5，那么我就需要以5、4、3、2、1的顺序插入，有一种栈结构先进后出的感觉）。
○'beforeend'：插入元素element里面的最后一个子节点之后（这个比较容易理解，就是插入到最后一个节点后，例如我插入5个节点，顺序是1、2、3、4、5，那就正常的1、2、3、4、5就好啦，但是注意是在已有节点的后面哦）。
○'afterend'：元素element自己的后面。