目录
1. document.write("标签的代码及内容");
3. document.createElement("标签的名字");
1.insertBefore( ) 在某个元素之前插入一个新的元素
0.码仙励志
态度决定一切,实力扞卫尊严!人要经得起诱惑耐得住寂寞
1. document.write("标签的代码及内容");
缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
<body>
<input type="button" value="创建一个p" id="btn"/>
码仙码仙码仙码仙码仙码仙
<script>
//document.write("标签代码及内容");
document.getElementById("btn").onclick = function () {
document.write("<p>这是一个p</p>");
};
</script>
</body>
2. 对象.innerHTML="标签及代码";
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 50px;
border: 2px solid pink;
}
</style>
</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
<div id="dv">这是div</div>
码仙码仙码仙码仙码仙码仙码仙
<script>
//点击按钮,在div中创建一个p标签
//对象.innerHTML="标签代码及内容";
document.getElementById("btn").onclick = function () {
document.getElementById("dv").innerHTML = "<p>天生我才必有用</p>";
};
</script>
</body>
3. document.createElement("标签的名字");
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 50px;
border: 2px dashed pink;
}
</style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script>
//创建元素
//document.createElement("标签名字");对象
//把元素追加到父级元素中
//点击按钮,在div中创建一个p
document.getElementById("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
pObj.innerText = "这是一个p";
//把创建后的子元素追加到父级元素中
document.getElementById("dv").appendChild(pObj);
};
</script>
</body>
4.元素相关的方法
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.只创建一个元素
1.有则删除
<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"));
}
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮";
obj.id = "btn2";
document.getElementById("dv").appendChild(obj);
};
</script>
</body>
2.无则创建
<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就没有
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮";
obj.id = "btn2";
document.getElementById("dv").appendChild(obj);
}
};
</script>
</body>
本篇博客来自于传智播客视频教程的总结以及笔记的整理,仅供学习交流,切勿用于商业用途,如有侵权,请联系博主删除,博主QQ:194760901