JS基础学习:元素创建
2019-04-04 本文已影响0人
Merbng
元素创建的三种方式
1.document.write("标签的代码及内容");
2.对象.innerHTML("标签的代码及内容");
3.document.createElement("标签的名字");
document.write()创建元素
- 缺陷：
如果是在页面加载完毕后，此时通过这个方式创建元素，那么页面上的存在的所有内容都会被干掉。
<input type="button" id="btn" value="点击">
<script src="js/common.js"></script>
<script>
my$('btn').onclick = function() {
document.write("<p>这是一个p</p>")
};
document.write("<p>这是一个p</p>")
</script>
.innerHTML创建元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 2px solid pink;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn" />
<div id="dv">
</div>
<script src="js/common.js"></script>
<script>
var i=0
my$('btn').onclick = function() {
i++;
my$('dv').innerHTML = "啊啊啊,五金件案件，安慰奖阿基，哇咔咔"+i;
};
</script>
</body>
</html>
document.createElement(""标签名字); 返回对象
创建元素，把元素追加到父级元素中。
<input type="button" value="按钮" id="btn" />
<div id="dv">
</div>
<script src="js/common.js"></script>
<script>
my$('btn').onclick = function() {
var pObj = document.createElement("P");
setInnerText(pObj, "哇咔咔");
//把创建后的子元素追加到父级元素中
my$('dv').appendChild(pObj);
};
</script>
案例：点击按钮创建列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" id="btn" value="创建列表">
<div id="dv"></div>
<script src="js/common.js"></script>
<script>
var names = ["哈哈", "家万佳", "我来了"];
my$('btn').onclick = function() {
var str = "<ul style='list-style-type:none;cursor:pointer'>"
for (i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>"
}
str += "</ul>";
my$('dv').innerHTML = str;
var list = my$('dv').getElementsByTagName('li');
for (j = 0; j < list.length; j++) {
list[j].onmouseover = function() {
this.style.backgroundColor = "yellow";
};
list[j].onmouseout = function() {
this.style.backgroundColor = "";
};
}
};
</script>
</body>
</html>
案例：创建一个图片
<body>
<input type="button" value="创建图片" id="btn" />
<div id="dv"></div>
<script src="js/common.js"></script>
<script>
my$('btn').onclick = function() {
my$('dv').innerHTML = "<img src='images/img1.jpg' alt='图啊'>";
};
</script>
</body>
案例：动态创建列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 400px;
background-color: pink;
border: 1px dashed red;
}
</style>
</head>
<body>
<input type="button" name="" id="btn" value="创建列表" />
<div id="dv"></div>
<script src="js/common.js"></script>
<script type="text/javascript">
var kunfu = ["问问", "请求", "嗯嗯", "让人", "天天", "预约", "啊啊", "哈哈", ];
my$('btn').onclick = function() {
// 创建ul 把ul立刻加入到div中
var ulObj = document.createElement('ul');
my$('dv').appendChild(ulObj);
// 动态创建li 加入到ul中
for (i = 0; i < kunfu.length; i++) {
var liObj = document.createElement('li');
liObj.innerHTML = kunfu[i];
ulObj.appendChild(liObj);
liObj.onmouseover=mouseoverHandle;
liObj.onmouseout=mouseoutHandle;
}
};
function mouseoverHandle(){
this.style.backgroundColor="yellow";
}
function mouseoutHandle(){
this.style.backgroundColor="";
}
</script>
</body>
</html>
案例：动态创建表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" name="" id="btn" value="创建列表" />
<div id="dv"></div>
<script src="js/common.js"></script>
<script type="text/javascript">
var webl = [{
name: "百度",
href: "http://www.baidu.com"
},
{
name: "搜狐",
href: "http://www.baidu.com"
}, {
name: "腾讯",
href: "http://www.baidu.com"
}
];
my$('btn').onclick = function() {
var tabObj = document.createElement('table');
tabObj.border="1";
tabObj.cellSpacing="0";
tabObj.cellPadding="0";
my$('dv').appendChild(tabObj);
// 创建行
for (i = 0; i < webl.length; i++) {
var dt = webl[i];
var trObj = document.createElement('tr');
tabObj.appendChild(trObj);
// 创建第一列
var td1 = document.createElement('td');
td1.innerHTML = dt.name
trObj.appendChild(td1);
// 创建第二列
var td2 = document.createElement('td');
td2.innerHTML = "<a href='" + dt.href + "'>" + dt.name + "</a>"
trObj.appendChild(td2);
}
};
</script>
</body>
</html>
元素相关的方法
.appendChild("元素")//追加元素
.insertBefore(obj,"参照的元素");//把新的子元素插入到参照的元素的前面
.replaceChild()；替换元素
.removeChild("元素");移除元素中的一个子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="显示效果" id="btn" />
<input type="button" value="干掉第一个子元素" id="btn2" />
<input type="button" value="干掉所有子元素" id="btn3" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
var i = 0;
my$("btn").onclick = function() {
i++;
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮" + i;
//my$("dv").appendChild(obj);//追加子元素
//把新的子元素插入到第一个子元素的前面
my$("dv").insertBefore(obj, my$("dv").firstElementChild);
//my$("dv").replaceChild();---自己玩
};
my$("btn2").onclick = function() {
//移除父级元素中第一个子级元素
my$("dv").removeChild(my$("dv").firstElementChild);
};
my$("btn3").onclick = function() {
//点击按钮删除div中所有的子级元素
//判断父级元素中有没有第一个子元素
while (my$("dv").firstElementChild) {
my$("dv").removeChild(my$("dv").firstElementChild);
}
};
</script>
</body>
</html>
