方式一:document.write,缺点创建好的元素会把之前页面中所有内容替换掉
方式二:innerHTML 创建好的元素会将当前盒子的内容替换掉,但不会替换页面中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点击添加h1" id="btn">
<button id="btn1">创建元素</button>
<div id="dv">
添加内容
</div>
<script src="common.js"></script>
<script>
my$('btn').onclick=function () {
// 方式一:document.write,缺点创建好的元素会把之前页面中所有内容替换掉
document.write('<h1>使用document.write动态添加的h1标签</h1>');
}
my$('btn1').onclick=function () {
// 方式一:innerHTML,创建好的元素会将当前盒子的内容替换掉
my$('dv').innerHTML='<p>使用innerHTML动态添加的p标签</p>'
}
</script>
</body>
</html>
方式三:①创建元素document.createElement(‘标签名’)
②将元素追加到负元素中 父元素.appendChild(上一步创建的元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" id="btn" value="方式三创建p标签">
<div id="dv"></div>
<script src="common.js"></script>
<script>
// 方式三创建元素document.createElement('标签名')
my$('btn').onclick=function () {
var dv=my$('dv');
var pObj=document.createElement('p');
dv.appendChild(pObj);
pObj.innerText='方式三创建元素';
}
</script>
元素相关的方法
1.insertBefore( ) 在某个元素之前插入一个新的元素
<body>
<input type="button" value="插入" id="btn">
<ul id="uu">
<li>第一</li>
<li>第二</li>
<li id="three">第三</li>
<li>第四</li>
</ul>
<script>
document.getElementById("btn").onclick = function () {
//创建一个li
var liobj = document.createElement("li");
//为创建的li设置内容
liobj.innerHTML = "哈哈哈";
//获取ul
var uuobj = document.getElementById("uu");
//获取第三个li
var threeobj = document.getElementById("three");
//把新创建的li放到第三个li的前面
//uuobj.insertBefore(liobj,threeobj);
//把新创建的li放到ul中第一个元素的位置
uuobj.insertBefore(liobj, uuobj.firstElementChild);
}
</script>
</body>
2.replaceChild( ) 替换某个元素
<body>
<input type="button" value="替换" id="btn">
<ul id="uu">
<li>第一</li>
<li>第二</li>
<li id="three">第三</li>
<li>第四</li>
</ul>
<script>
document.getElementById("btn").onclick = function () {
//创建一个li
var liobj = document.createElement("li");
//为创建的li设置内容
liobj.innerHTML = "哈哈哈";
//获取ul
var uuobj = document.getElementById("uu");
//获取第三个li
var threeobj = document.getElementById("three");
//把新创建的li替换成第三个li
uuobj.replaceChild(liobj, threeobj);
}
</script>
</body>
3.removeChild( ) 删除某个元素
<body>
<input type="button" value="删除" id="btn">
<ul id="uu">
<li>第一</li>
<li>第二</li>
<li id="three">第三</li>
<li>第四</li>
</ul>
<script>
document.getElementById("btn").onclick = function () {
//获取ul
var uuobj = document.getElementById("uu");
//获取第三个li
var threeobj = document.getElementById("three");
//把三个li删除
uuobj.removeChild(threeobj);
}
</script>
</body>
5.只创建一个元素
<!DOCTYPE html>
<html lang="en">
<<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 60px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script>
//先判断有没有, 有就删除, 然后再创建
document.getElementById("btn").onclick = function () {
//判断,div中有没有这个按钮,有就删除
//判断这个按钮的子元素是否存在
if (document.getElementById("btn2")) {//如果为true就有
document.getElementById("dv").removeChild(document.getElementById("btn2"));
}else{
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮";
obj.id = "btn2";
document.getElementById("dv").appendChild(obj);
}
}
</script>
</body>
</html>