元素的创建，是为了提高用户的体验
元素创建有三种方式：
1、document.write("标签的代码及内容");
2、对象.innerHTML = "标签及代码";
3、document.createElement("标签的名字");
1、document.write("标签的代码及内容");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<h1>我是标题一</h1>
<p>我是一个段落</p>
<h3>我是标题三</h3>
<script>
document.getElementById("btn").onclick = function(){
document.write("<p>这是三只小狗</p><img src='1.jpg' alt='三只小狗'/>");
};
</script>
</body>
</html>点击按钮前：
点击按钮后：
document.write("标签的代码及内容"); 创建元素，缺陷：如果是在页面加载完成后，通过这种方式创建元素，那么页面上之前存在的所有内容全部被干掉了。页面加载过程中，用这种方式，原本的内容还有。
2、对象.innerHTML = "标签及代码";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<h1>我是标题一</h1>
<p>我是一个段落</p>
<h3>我是标题三</h3>
<div id="box" style="border:1px solid red; width: 400px;">
我是一个盒子
</div>
<script>
document.getElementById("btn").onclick = function(){
document.getElementById("box").innerHTML = "<p>这是三只小狗</p><img src='1.jpg' alt='三只小狗'/>";
};
</script>
</body>
</html>点击按钮前：
点击按钮后：
盒子中原本的内容没有了。出现的新创建的内容
3、document.createElement("标签的名字");
第一步：document.createElement("标签的名字"); 创建了一个元素
第二步：把元素追加到父级元素当中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<h1>我是标题一</h1>
<p>我是一个段落</p>
<h3>我是标题三</h3>
<div id="box" style="border:1px solid red; width: 400px;">
我是一个盒子
</div>
<script>
var box = document.getElementById("box");
document.getElementById("btn").onclick = function(){
//创建一个p元素
var pObj = document.createElement("p");
pObj.innerHTML = "这是三只小狗";
//那创建的元素追加到父元素中
box.appendChild(pObj);
//创建一个img元素
var imgObj = document.createElement("img");
imgObj.src = "1.jpg";
imgObj.alt = "三只小狗";
//那创建的元素追加到父元素中
box.appendChild(imgObj);
};
</script>
</body>
</html>点击按钮前：
点击按钮后：
盒子中原本的内容还在，新建的元素追加到了父元素的后面。