在前面的讲解中我们都是通过手动写一些html标签，然后通过JS来控制并操作这些标签。
其实还有另一种方式，那就是通过JS的节点操作语法来动态的给页面中添加标签、删除标签或移除标签，相比第一种方法而言，JS动态操作更为重要。
因为在JS的节点中，不仅可以操作一个完整的标签，而且可以动态的操作标签的所有属性，甚至标签的内容。
从本节课开始，我们将对JS的节点操作进行详细说明。
首先我们看如何创建一个节点。
需要说明的是：创建节点只是在内存中创建一个标签，如果需要在页面中显示该标签，则需要使用添加节点的方法，这些操作在后面都会讲解的。
请看以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
//1、字面量方式创建节点
var tag = '<div id="div1">hello</div>';
console.log(tag, typeof tag);
//2、JS语法创建一个标签
var tag = document.createElement('div');
console.log(tag, typeof tag);
//3、创建一个文本节点
var text = document.createTextNode('hello');
console.log(text, typeof text)
//4、将创建的文本节点 放到标签中
tag.appendChild(text);
console.log(tag, typeof tag);
</script>
</html>
上面我们通过两种方法创建了节点，即html标签，一种是字面量形式，它得到的是一个string类型的字符串，另一种是通过原生js的节点创建语法，它得到的是一个object对象。
我们还创建了一个文本节点，并将文本节点添加到了标签节点中，即：给标签添加内容。
此时，我们创建出来的这些数据仅在内存中存在，页面中并不会显示，在下一讲中我们会告诉大家如何让它在页面中显示出来。
|
窥视卡
雷达卡
发表于 2023-1-25 12:42:17
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 00:06:39
