如果你看到前面的阴影,别怕,那是因为你背后有阳光
下面是对JavaScript中创建页面节点的整理,希望可以帮助到有需要的小伙伴
创建页面节点
1、创建元素节点
Document对象提供了createElement()方法创建节点
语法格式:
var element = document.createElement(tagName);
- tagName是参数,表示创建元素的元素名称。
- element是放回值,表示创建的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建元素节点</title>
</head>
<body>
<script>
// 1. 创建<button></button>元素
var btn = document.createElement('button');
// 2. 获取<body>元素
var body = document.body;
// 3. 向<body>元素添加子节点
body.appendChild(btn);
</script>
</body>
</html>
2、创建文本节点
Document对象提供了createTextNode()方法创建文本节点
语法格式:
var textNode = document.createTextNode(date);
- date是参数,包含了放在文本节点中的内容,是一个字符串。
- textNode是返回值,表示创建文本的节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建文本节点</title>
</head>
<body>
<script>
// 1. 创建<button>文本</button>元素
var btn = document.createElement('button');
// 2. 创建文本节点
var textNode = document.createTextNode('按钮');
// 3. 向<button>元素添加子节点
btn.appendChild(textNode);
// 4. 获取<body>元素
var body = document.body;
// 5. 向<body>元素添加子节点
body.appendChild(btn);
</script>
</body>
</html>
3、创建属性节点
Document对象提供了createAtrribute()方法创建属性节点
语法格式:
var arributeNode = document.createAttribute(name);
- name是参数,属性节点的属性名称。
- attributeNode是返回值,表示创建二点属性节点。
注意:
- 创建属性节点只具有属性名称,没有属性值。想要设置属性值需要通过nodeValue属性完成。
- 由于属性节点不是元素节点的子节点,不能使用添加子节点方式操作属性节点。想要添加属性节点需要通过setAttributeNode()方法完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建属性节点</title>
</head>
<body>
<script>
// 1. 创建<button>文本</button>元素
var btn = document.createElement('button');
// 2. 创建文本节点
var textNode = document.createTextNode('按钮');
// 3. 向<button>元素添加子节点
btn.appendChild(textNode);
// 4. 创建属性节点
var attrNode = document.createAttribute('id');
// 5. 为属性节点设置值
attrNode.nodeValue = 'btn';
// 6. 向<button>元素设置属性节点
btn.setAttributeNode(attrNode);
// 7. 获取<body>元素
var body = document.body;
// 8. 向<body>元素添加子节点
body.appendChild(btn);
</script>
</body>
</html>