JavaScript DOM三种创建元素的方式
程序员文章站
2022-03-07 21:46:02
三种创建元素的方式：document.write()element.innerHTMLdocument.createElement()初始HTML内容：
p
inner
create
预览：1. document.write()实现代码：...三种创建元素的方式：
document.write()element.innerHTMLdocument.createElement()
1. document.write()
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>btn</button>
<p>段落</p>
<div class="inner">inner</div>
<div class="create">create</div>
<script>
var btn = document.querySelector('button');
btn.onclick = function() {
document.write('<div>123</div>');
}
</script>
</body>
</html>
初始页面：
实现效果：
点击“btn”按钮之后：
显然，使用document.write()创建元素，如果页面文档流加载完毕，再调用事件会导致页面重绘
2. element.innerHTML
(1) 字符串拼接方式：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>btn</button>
<p>段落</p>
<div class="inner">inner</div>
<div class="create">create</div>
<script>
var inner = document.querySelector('.inner');
inner.innerHTML += ' <a href="#">我是后来加的链接，字符串拼接方式</a>';
</script>
</body>
</html>
实现效果：
(2) 添加数组元素方式：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>btn</button>
<p>段落</p>
<div class="inner">inner</div>
<div class="create">create</div>
<script>
var inner = document.querySelector('.inner');
// 创建空数组
var arr = [];
// 将需要添加的元素，添加到数组中
arr.push('<a href="#"> 我是后来加的链接，数组方式</a>');
// 将数组转化为字符串，再给到inner节点
inner.innerHTML = arr.join('');
</script>
</body>
</html>
实现效果：
3. document.createElement()
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>btn</button>
<p>段落</p>
<div class="inner">inner</div>
<div class="create">create</div>
<script>
var create = document.querySelector('.create');
var a = document.createElement('a');
create.appendChild(a);
</script>
</body>
</html>
实现效果：
总结：
-
document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。 -
innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。创建多个元素，结构稍微复杂。可以用字符串拼接方式、数组方式添加。 -
createElement()创建多个元素，结构更清晰。
本文地址：https://blog.csdn.net/Jack_lzx/article/details/109263287
上一篇： 前端面试题
下一篇： 详解Python中的List