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