【Web APIs】JavaScript 节点操作 ⑪ ( 动态创建元素的三种方式 | document.write | element.innerHTML | createElement )
文章目录
在 【Web APIs】JavaScript 节点操作 ① ( DOM 方式获取标签元素的弊端 | 节点简介 | DOM 节点概述 | 节点基本属性 - 节点类型、节点名称、节点值 ) 博客 中 , 介绍了 传统 DOM 方式获取节点的方式 及其 弊端 ( 调用繁琐、逻辑性差 ) , 并对 节点的基本属性 ( 节点类型、节点名称、节点值 ) 进行了简要介绍 ;
在 【Web APIs】JavaScript 节点操作 ② ( DOM 节点层级 | 利用节点间的层次关系获取元素 | 遍历节点层级 | 获取 父节点 / 子节点 代码示例 ) 博客 中 , 介绍了 利用 节点间的层次关系获取元素 , 通过 parentNode 获取父元素 , 通过 childNodes 获取所有类型节点 ( 包括文本节点 ) , 通过 children 获取子元素节点 , 并给出了示例代码 ;
在 【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 ) 博客 中 介绍 了 第一个子节点 和 最后一个子节点 的获取方式 ;
在 【Web APIs】JavaScript 节点操作 ④ ( 节点操作案例 - 下拉菜单案例 ) 博客中 , 开发了一个 节点操作的案例 , 控制下拉菜单 显示 / 隐藏 ;
在 【Web APIs】JavaScript 节点操作 ⑤ ( 操作兄弟节点 | 获取兄弟节点属性 | 自定义兼容函数 ) 博客中 , 介绍了 利用 previousSibling、nextSibling、previousElementSibling、nextElementSibling 属性 进行兄弟节点操作 ;
在 【Web APIs】JavaScript 节点操作 ⑥ ( 创建和添加节点 | 创建标签节点 | 创建文本节点 | 创建文档片段 | 添加节点 | 代码示例 ) 博客中 , 介绍如何 动态 创建和添加节点 ; 使用 document.createElement( tagName) 方法 创建 标签名为 tagName 的 HTML 标签元素 ; 使用 parent.appendChild(child) 方法 将元素添加到父容器末尾 , 使用 parent.insertBefore(newNode, referenceNode) 方法 在参考节点前插入新节点 ;
在 【Web APIs】JavaScript 节点操作 ⑦ ( 创建节点案例 | 网页评论功能 ) 博客中 , 讲解了 创建并添加节点 的 案例 , 简单演示了 网页评论功能 ;
在 【Web APIs】JavaScript 节点操作 ⑧ ( 删除节点 - removeChild 函数 | 删除节点 - 代码示例 | 删除网页评论案例 ) 博客中 , 介绍了 删除节点 操作 及 案例 ;
在 【Web APIs】JavaScript 节点操作 ⑨ ( 复制节点 | cloneNode 函数 | 代码示例 ) 博客 中 , 介绍 复制节点 操作 , 调用 cloneNode 函数 复制节点 , 默认 传入 false 参数为 节点浅拷贝 , 传入 true 参数为 节点深拷贝 ;
在【Web APIs】JavaScript 节点操作 ⑩ ( 节点操作综合案例 - 动态生成表格案例 ) 博客 开发一个 节点操作综合案例 , 动态生成表格案例 ;
本篇 博客 中 , 介绍 动态创建元素的三种方式 , ① document.write() 方式动态创建元素 , ② element.innerHTML 方式动态创建元素 , ③ document.createElement() 方式动态创建元素 ;
一、document.write() 方式动态创建元素
1、document.write() 函数简介
调用 document.write() 函数 直接 向 HTML 文档流中写入内容 , 可以直接写入 字符串 ( 文本标签 ) 或 HTML 标签 ( 元素标签 / 注释标签 ) ;
document.write 函数直接将内容写入到文档中 , 当 文档流 加载完毕后 , 页面直接重绘 , 页面中原来的内容会消失 , 因此这种用法很少使用 ;
适用场景 : 该方式 仅适用于 页面初始化阶段 生成简单内容 , 开发时基本不会使用这种方式 动态生成 元素 ;
document.write() 函数 动态创建元素 的 缺陷 : 每次调用该函数 , 整个 DOM 树都会进行重绘 ;
- 破坏性 : 若在 文档加载完成后 调用 , 会覆盖整个页面 , 重写整个 document ;
- 阻塞性 : 仅在 页面 初始渲染阶段 使用安全 , 否则会导致 页面重新加载 ;
- 效率低 : 频繁操作会 触发 多次页面重绘 ;
下面 是 document.write() 函数 代码示例 :
// 页面加载中执行：正常插入
document.write('<div>动态内容</div>');
// 页面加载后执行（如按钮点击）：覆盖整个页面！
document.write('<div>新内容</div>'); // 原页面消失
2、代码示例 - document.write() 创建元素
代码示例 :
<!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>
<button>点击按钮创建元素</button>
<p>abc</p>
<script>
// 调用 document.write() 函数 创建元素 , 该方式会导致页面重绘
// 获取按钮元素对象
var btn = document.querySelector('button');
// 为按钮元素对象绑定点击事件
btn.onclick = function() {
// 写入新的元素到页面中
document.write('<div>123</div>');
}
</script>
</body>
</html>
执行结果 :
执行后 , 显示如下内容 ;
点击按钮后 , 整个 Document 文档就会变为
<div>123</div>
之前的内容 会消失 ;
<button>点击按钮创建元素</button>
<p>abc</p>
最终的效果为 :
二、element.innerHTML 方式动态创建元素
1、element.innerHTML 方式简介
element.innerHTML 方式 是 通过 设置 DOM 元素 的 innerHTML 属性 , 将 字符串 解析为 HTML 标签结构 并插入到 HTML 文档中 ;
element.innerHTML 方式 动态创建元素 特点 :
- 高效解析 : 一次性插入大量 HTML 结构时 , 性能效率较高 , 可以减少大量的 DOM 操作次数 ;
- 覆盖风险 : 使用 " = " 符号 直接赋值 会替换元素内原有内容 , 需要使用 " += " 符号 追加 HTML 文本 , 注意 : 频繁追加易引发性能问题 , 导致效率降低 ;
- XSS 风险 : XSS ( Cross-Site Scripting , 跨站脚本攻击 ) , 直接插入未处理的用户输入可能导致安全漏洞 ;
element.innerHTML 插入 HTML 结构 的两种方式 :
- 方式一 : 直接拼接 HTML 字符串会导致效率降低 ( 不推荐使用 )
// 方式一 : 直接拼接 HTML 字符串会导致效率降低 ( 不推荐使用 )
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">创建元素</a>'
}
- 方式二 : 现将 HTML 字符串放入数组中 , 然后将数组中的 HTML 文本一次性放入页面中 ( 推荐使用 ) ;
// 方式二 : 现将 HTML 字符串放入数组中 , 然后将数组中的 HTML 文本一次性放入页面中 ( 推荐使用 )
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">创建元素</a>');
}
inner.innerHTML = arr.join('');
2、代码示例 - element.innerHTML 方式动态创建元素
代码示例 :
<!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>
<button>点击按钮创建元素</button>
<div class="inner"></div>
<script>
// 获取按钮元素对象
var btn = document.querySelector('button');
// 为按钮元素对象绑定点击事件
btn.onclick = function() {
// 写入新的元素到页面中
var inner = document.querySelector('.inner');
// 方式一 : 直接拼接 HTML 字符串会导致效率降低 ( 不推荐使用 )
/* for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">创建元素</a>'
} */
// 方式二 : 现将 HTML 字符串放入数组中 , 然后将数组中的 HTML 文本一次性放入页面中 ( 推荐使用 )
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">创建元素</a>');
}
inner.innerHTML = arr.join('');
}
</script>
</body>
</html>
执行结果 :
执行后 , 显示如下内容 :
点击按钮后 , 界面效果 :
三、document.createElement() 方式动态创建元素
1、document.createElement() 函数简介
document.createElement() 函数 用于 动态创建元素节点 , 通过 DOM 操作方法 将 元素 插入到指定位置 , 如 : appendChild 函数 ;
document.createElement() 函数 动态创建元素 特点 :
-
非破坏性 : 可以 精准控制 元素插入位置 , 不影响其他节点 ;
-
性能优化 : 配合 文档片段 DocumentFragment , 可 减少重排次数 ;
-
安全可靠 : 通过 API 设置 属性/内容 , 天然 规避 XSS ( Cross-Site Scripting , 跨站脚本攻击 ) 风险 ;
2、代码示例 - document.createElement() 函数动态创建元素
代码示例 :
<!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>
<button>点击按钮创建元素</button>
<div class="create"></div>
<script>
// 获取按钮元素对象
var btn = document.querySelector('button');
// 为按钮元素对象绑定点击事件
btn.onclick = function() {
// 获取页面中类名为"create"的元素，用于后续添加新创建的元素
var create = document.querySelector('.create');
// 循环101次（从0到100，包含100），用于创建多个相同的元素
for (var i = 0; i <= 100; i++) {
// 创建一个<a>标签（超链接元素）
var a = document.createElement('a');
// 设置超链接的显示文本为"创建元素"
a.textContent = '创建元素';
// 设置超链接的跳转地址为百度首页
a.href = 'https://www.baidu.com';
// 将创建的超链接元素添加到之前获取的"create"元素内部
create.appendChild(a);
}
}
</script>
</body>
</html>
执行结果 :
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
18
0- 0
已为社区贡献35条内容
所有评论(0)