三种创建元素的方式:
document.write()
element.innerHTML
document.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()
创建多个元素,结构更清晰。