JavaScript创建页面节点

如果你看到前面的阴影，别怕，那是因为你背后有阳光

下面是对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>

JavaScript创建页面节点相关推荐

Javascript元编程创建DOM节点
在使用javascript创建DOM节点的过程中,难免要使用document.createElement.setAttribute. document.createTextNode等冗长.还有浏览器兼 ...
JavaScript 插入Dom节点
大家好,今天我们来分享JavaScript 插入Dom节点首先我们要知道, 不管我们对Dom节点进行什么样的操作,都必须先获取这个节点,假如说,这个dom节点是空的,我们可以通过innerHTML就 ...
Javascript创建节点
在Javascript中,可以创建各种类型的节点. 下面列出常用的创建节点的方法: 方法说明 createElement() 创建一个元素节点 createTextNode() 创建一个文本节点 c ...
Javascript第五章innerHTML/innerText/创建新节点元素添加内容第八课
测试结果: 步骤: 练习:按钮每点击一次,下面内容就增加一条更多免费教学文章请关注这里结果源码: <!DOCTYPE html> <html lang="zh&quo ...
【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
文章目录 DOM节点创建节点 1. 创建元素节点 2. 创建文本节点插入节点 1. appendChild() 2. insertBefore() 删除节点 1. removeChilde() 2 ...
js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...
在一个Web页面中,需要弹出一个提示信息显示给用户.基于这个需求,要使用document.createElement()创建一个DOM节点.创建完节点后,还要使用appendChild()或inser ...
【Javascript】 DOM节点
HTML文档中一切都是节点! 整个文档是文档节点: 注释是注释节点: 每一个HTML元素都是一个元素节点: 元素内的文本内容是文本节点: 连元素的每一个属性都是一个属性节点. 看到这些是不是感觉很熟悉 ...
怎么创建html元素节点,怎么用DOM创建a节点
JS嘛霸哥你如果想看效果,应该先创建一个基本页面类似html> 文档标题接下来要做的选择嵌入页面的js还是在控制台中输出(引用外部文件也可以)选择好之后这样搞,首先以**.html (**你 ...
JavaScript——DOM之节点操作
节点操作前述: 一.节点的概述二.节点操作 1.节点层级 2.案列-下拉菜单 3.兄弟节点 4.创建节点 5.删除节点 6.案列 :留言并且删除节点 7.复制节点 8.案例:动态生成表格 9.三种 ...

JavaScript创建页面节点

如果你看到前面的阴影，别怕，那是因为你背后有阳光

创建页面节点

1、创建元素节点

2、创建文本节点

3、创建属性节点

JavaScript创建页面节点相关推荐

最新文章

热门文章