创建节点
元素节点：document.createElement(“标签名”);
返回值：新的元素节点
创建完成后，需要插入到页面中才能看到
文本节点
document.createTextNode(内容);这个不能解析标签,只能文本
插入节点
node.appendChild（创建的节点）
在父节点的最后添加一个新的子节点。
node.insertBefore(新节点，参考节点)
在父节点的参考节点前添加一个新的子节点。（新节点和参考节点是同级，要同一个父节点）
如果参考节点为null，则在父节点的最后添加新的子节点
例子;将文字插入到页面中
<style>
.ni {
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<div id="str"></div>
</body>
<script>
/* var p = document.createElement("p"); //创建一个p标签
var text = document.createTextNode(` 李四`); //创建文本节点
p.className = "ni"; //给p标签加一个属性值
p.appendChild(text); //在p节点的最后添加一个新的文本节点
var divs = document.querySelector("#str"); //获取到放置内容的大div
divs.appendChild(p); //在大div的后面放置一个p标签*/
var p = document.createElement("p"); //创建一个p标签
p.innerHTML = `<span class="ni">张三</span>`;
var divs = document.querySelector("#str");
divs.appendChild(p);
console.log(divs);
</script>
练习:创建一个input框并赋值
<body>
<div class="box"></div>
</body>
<script>
var divs = document.querySelector(".box");
var inputs = document.createElement("input");
inputs.setAttribute("value", "张三");
divs.appendChild(inputs);
// divs.innerHTML = inputs;不能这样写会报错
</script>
例子,用js将图片插入到页面中
<style>
.str {
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<p>河山</p>
</div>
</body>
<script>
var box = document.querySelector(".box");
var img = document.createElement("img"); //创建一个img标签
img.setAttribute("src", "img/1.jpg"); //<img src ="img/1.jpg">
img.className = "str"; //img的 class="str"
box.appendChild(img); //box的最后面添加
console.log(box);
</script>
例子;创建下拉框
<body>
下拉框 <select name="" id="">
<option value="">篮球</option>
<option value="">足球</option>
</select>
</body>
<script>
var xia = document.getElementsByTagName("select")[0];
var options = document.createElement("option");
options.text = "羽毛球";
// xia.appendChild(options);方法1
xia.options.add(options); // 方法2
</script>
删除节点
父节点.removeChild(子节点);
在父节点中移除该子节点
node.remove();
在父节点中移除自身。
替换节点
用一个节点去替换另外一个节点
父节点.replaceChild(新节点,旧节点);
复制节点
node.cloneNode([true]);
复制节点，克隆节点
如果参数为true，则将其所有子节点也克隆。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var s = document.createElement("p");//创建节点
s.innerHTML = "三十功名尘与土";//节点中放内容
var box = document.getElementById("box");//获取元素节点
box.appendChild(s);//插入节点 在父节点的最后添加一个新的节点
//-----------------------------------------------------
var bq = document.querySelector("p");//获取元素节点
var spa = document.createElement("span");//创建节点
spa.innerHTML = "三十";
box.insertBefore(spa, bq);//插入节点 在参考节点的前面添加一个新的节点
//-----------------------------------------------------
//删除节点------------------
// box.removeChild(bq);//在box中移除p标签
// bq.remove();//移除自身
// 替换节点----------------把原来的p给换掉
// var th = document.createElement("th");
// th.innerHTML="你好";
// box.replaceChild(th,bq);
// 复制节点----------------
var cloneNode = box.cloneNode(true);
box.appendChild(cloneNode);
//此处情况将box中的所有复制一遍,包括在复制之前添加的节点及内容
}
</script>
</head>
<body>
<div id="box">
<p>慢慢
</p>
</div>
</body>
</html>
创建属性节点
createAttribute()方法用于创建一个指定名称的属性，并返回Attr 对象属性
示例:创建 class 属性, 属性值为 “democlass”, 并将clas属性添加到 H1 元素中:
var att=document.createAttribute("class");
att.value="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(att);