点击切换帐号登陆
帐号密码登陆

如何创建节点?

# 创建节点

## 1. createElement()

* 创建元素节点
* 参数是HTML元素的标签名

----------------------------

## 2. createTextNode()

* 创建文本节点
* 参数是文本内容

----------------------------

## 3. cloneNode(true)

* 克隆节点: 从已有节点上创建新节点
* 参数`true`是深度复制,将原节点的所有子节点全部克隆到新节点中

> 注: 新节点必须添加到页面中,才可以被看到或使用

----------------------------

## 4. 示例源码

```html
<!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>创建节点</title>
</head>
<body>
<h2>php.cn</h2>
<script>
// 创建元素节点
var p = document.createElement('p');

// 创建文本节点
var text = document.createTextNode('文本节点的内容');

// 创建的元素和内容,必须添加到当前文档或元素中才可以使用, 分二步完成
// 1. 将文本添加到元素中
p.appendChild(text);
// 2. 将元素添加到页面中
document.body.appendChild(p);

// 还可以复制已有节点来创建新节点
// 节点克隆
var h2 = document.getElementsByTagName('h2')[0];
// true: 深度克隆,将原节点的所有子节点内容一起复制
var newEle = h2.cloneNode(true);
console.log(newEle);
// 将新节点添加以页面中
document.body.appendChild(newEle);

</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号