1、创建元素的三种方式
document.write("标签的代码及内容")
document.write('新设置的内容<p>标签也可以生成</p>');
<body>
<input type="button" value="创建一个p" id="btn"/>
我喜欢喝哇哈哈和爽歪歪
<script src="common.js"></script>
<script>
//document.write("标签代码及内容");
my$("btn").onclick=function () {
document.write("<p>这是一个p</p>");
};
//document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
</script>
</body>
innerHTML="标签及代码"
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>'; <style>
div{
width: 300px;
height: 200px;
border:2px solid pink;
}
</style>
</head>
<body>
<input type="button" value="创建一个p" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
//点击按钮,在div中创建一个p标签
//第二种方式创建元素: 对象.innerHTML="标签代码及内容";
my$("btn").onclick=function () {
my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
};
</script>
</body>
案例：点击按钮创建列表
<style>
div {
width: 300px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
my$("btn").onclick = function () {
var str = "<ul style='list-style-type: none;cursor: pointer'>";
//根据循环创建对应对数的li
for (var i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
//代码执行到这里,li已经有了
//获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
var list = my$("dv").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//鼠标进入
list[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//鼠标离开
list[i].onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
</body>
document.createElement("标签的名字")
创建的是元素节点
var div = document.createElement('div');
document.body.appendChild(div); <style type="text/css">
#div1{
height: 300px;
width: 200px;
border: 2px dashed skyblue;
}
</style>
</head>
<body>
<input type="button" name="" value="追加" id="btn">
<div id="div1"></div>
<script type="text/javascript">
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
var pObj=document.createElement("p");
// setInnnerText(pObj,"这是一个p标签");
pObj.innerHTML="这是一个p标签";
var div1=document.getElementById("div1");
div1.appendChild(pObj);
};
</script>
案例
1、用第三种方式动态创建列表
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
//点击按钮动态的创建列表,把列表加到div中
my$("btn").onclick = function () {
//创建ul,把ul立刻加入到父级元素div中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//动态的创建li,加到ul中
for (var i = 0; i < kungfu.length; i++) {
var liObj = document.createElement("li");
//设置li中间的文字内容
liObj.innerHTML = kungfu[i];
ulObj.appendChild(liObj);
//为li添加鼠标进入事件
liObj.onmouseover = mouseoverHandle;
//为li添加鼠标离开事件
liObj.onmouseout = mouseoutHandle;
}
};
//此位置.按钮的点击事件的外面
function mouseoverHandle() {
this.style.backgroundColor = "red";
}
function mouseoutHandle() {
this.style.backgroundColor = "";
}
//如果是循环的方式添加事件,推荐用命名函数
//如果不是循环的方式添加事件,推荐使用匿名函数
</script>
</body>
2、点击按钮创建一个表格
<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>
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"}
];
//点击按钮创建表格
my$("btn").onclick=function () {
//创建table加入到div中
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
my$("dv").appendChild(tableObj);
//创建行,把行加入到table中
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每个对象
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
//创建第一个列,然后加入到行中
var td1=document.createElement("td");
td1.innerText=dt.name;
trObj.appendChild(td1);
//创建第二个列
var td2=document.createElement("td");
td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
trObj.appendChild(td2);
}
};
</script>
</body>
2、元素相关的操作方法
获得元素，替换元素，移除元素
<style type="text/css">
#div1{
width: 200px;
height: 300px;
border: 2px dashed skyblue;
}
</style>
</head>
<body>
<input type="button" name="" value="追加按钮" id="btn">
<input type="button" name="" value="移除第一个" id="btn1">
<input type="button" name="" value="全部移除" id="btn2">
<div id="div1"></div>
<script type="text/javascript">
var i=0;
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
i++;
var obj=document.createElement("input");
obj.type="button";
obj.value="按钮"+i;
var div1=document.getElementById("div1");
//div1.appendChild(obj); //追加子元素
//把新的子元素插入到第一个子元素的前面（相对的）
div1.insertBefore(obj,div1.firstElementChild);
};
var btn1=document.getElementById("btn1");
btn1.onclick=function () {
//移除父级中第一个子级元素
div1.removeChild(div1.firstElementChild);
};
var btn2=document.getElementById("btn2");
btn2.onclick=function () {
//点击按钮删除div中所有的子级元素
//判断父级元素中有没有第一个子级元素
while(div1.firstElementChild){
div1.removeChild(div1.firstElementChild);
}
};
</script>
</body>
3、只创建一个元素
有则删除，无则创建
//先判断有没有,有就删除,然后再创建
my$("btn").onclick=function () {
//判断,div中有没有这个按钮,有就删除
//判断这个按钮的子元素是否存在
if(my$("btn2")){//如果为true就有
my$("dv").removeChild(my$("btn2"));
}
var obj=document.createElement("input");
obj.type="button";
obj.value="按钮";
obj.id="btn2";
my$("dv").appendChild(obj);
};
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
