元素创建的三种方式:
1.document.write(“标签的代码及内容”);
2.对象.innerHTML=“标签的代码及内容”;
3.document.createElement(“标签的名字”);
document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
点击按钮创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="common.js"></script>
<style>
div{
width: 300px;
height: 400px;
border: 1px solid red;
background-color: yellow;
}
</style>
</head>
<body>
<script>
/*
*元素创建的三种方式:
*1.document.write("标签的代码及内容");
*2.对象.innerHTML="标签的代码及内容";
*3.document.createElement("标签的名字");
* document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
* */
</script>
<!--点击按钮创建列表-->
<input type="button" value="按钮" id="btn">
<div id="div"></div>
<script>
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
document.getElementById("btn").onclick=function () {
var str="<ul style='list-style: none;cursor: pointer'>"
for(var i=0;i<names.length;i++){
str+="<li>"+names[i]+"</li>";
}
str+="</ul>";
document.getElementById("div").innerHTML=str;
//获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
var list=document.getElementsByTagName("li");
for(var i=0;i<list.length;i++){
list[i].onmouseover=function () {
this.style.backgroundColor="red";
};
list[i].onmouseout=function () {
this.style.backgroundColor="";
};
}
};
</script>
</body>
</html>第三种方式创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<script>
/*
* 1.创建元素
* document.createElement("标签名")----->对象
* 2.把创建后的子元素追加到父级元素中
* 父级对象.appendChild(子对象)
* 如果是循环的方式添加事件,推荐用命名函数
* 如果不是循环的方式添加事件,推荐使用匿名函数
* */
</script>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<!--动态创建列表-->
<script>
var art = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
document.getElementById("btn").onclick=function () {
//创建ul,把ul立刻加入到父级元素div中
var obj=document.createElement("ul");
document.getElementById("dv").appendChild(obj);
//动态的创建li,加到ul中
for (var i=0;i<art.length;i++){
var objs=document.createElement("li");
obj.appendChild(objs);
//设置li中间的文字内容
objs.innerText=art[i];
//为li添加鼠标进入事件
objs.onmouseover = mouseoverHandle;
//为li添加鼠标离开事件
objs.onmouseout = mouseoutHandle;
}
};
function mouseoverHandle() {
this.style.backgroundColor="red";
};
function mouseoutHandle() {
this.style.backgroundColor="";
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<a href="" ></a>
<script>
var arr=[
{name:"百度",href:"http://www.baidu.com"},
{name:"谷歌",href:"http://www.google.com"},
{name:"优酷",href:"http://www.youku.com"},
{name:"土豆",href:"http://www.tudou.com"},
{name:"快播",href:"http://www.kuaibo.com"},
{name:"爱奇艺",href:"http://www.aiqiyi.com"}
];
document.getElementById("btn").onclick=function () {
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
document.getElementById("dv").appendChild(tableObj);
for(var i=0;i<arr.length;i++){
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
var tdObj=document.createElement("td");
trObj.appendChild(tdObj);
tdObj.innerHTML=arr[i].name;
var tdObj2=document.createElement("td");
trObj.appendChild(tdObj2);
tdObj2.innerHTML="<a href="+arr[i].href+" >"+arr[i].name+"</a>";
}
};
</script>
</body>
</html>只创建一个子元素的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
/*
* 有则删除，无则创建
* */
my$("btn").onclick=function () {
//先判断有没有,有就删除,然后再创建
if(my$("btn2")){
my$("dv").removeChild(my$("bt2"));
}
var put=document.createElement("input");
put.type="button";
put.value="按钮";
put.id="btn2";
my$("dv").appendChild(put);
};
// my$("btn").οnclick=function () {
// //判断这个按钮的子元素是否存在
// if(!my$("btn2")){
// var put=document.createElement("input");
// put.type="button";
// put.value="按钮";
// put.id="btn2";
// my$("dv").appendChild(put);
// }
// };
</script>
</body>
</html>
