javaScript中createElement案例
javaScript中createElement案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>createElement案例,雪豹软件工作室</title>
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="mark.css">
<style type="text/css">
.testDiv {
border-color: #8E388E;
width: 800px;
height: 300px;
border-style: solid;
border-width: 5px;
background-color: #F0E68C;
margin:0 auto;
}
</style>
<script type="text/javascript">
var index = 0;
//向div层中添加一个图片
function addImg(){
index++;
var imgNode = document.createElement("img");//创建一个图片
imgNode.src = "img/cry19.gif";//设置图片节点的src属性
imgNode.title = "伤心表情图片" + index + "(单击我就可以删除我)";//设置图片节点的title属性
imgNode.onclick = deleteMe; // 单击删除
//imgNode.ondblclick = deleteMe; // 双击删除
var divNode = document.getElementById("myDiv");
divNode.appendChild(imgNode);//追加图片节点到div层中
}
//删除div层中的最后一个图片
function deleteImg(){
var divNode = document.getElementById("myDiv");
divNode.removeChild(divNode.lastChild);//删除除div层中的最后一个图片
}
function $(id){
var myNode = document.getElementById(id);
//alert("myNode = " + myNode);
return myNode;
}
function deleteMe(){
//alert("*******" + $("myDiv").id + "***" + $("myDiv").className + "*******");
//var divNode = document.getElementById("myDiv");
//divNode.removeChild(this);
/*
event.srcElement指的是产生事件的元素(event是内置对象，也是事件对象,表示发生的某个事件,
这里列举event的2个属性,其他的属性可查阅相关的文档说明，不做过多的列举
keyCode:当前的按键编码
srcElement:在哪个控件中产生的此事件
)
*/
//alert("deleteMe" + event.srcElement);
//alert("deleteMe");
/*以下2种写法都可以,使用this这种写法比较简单点*/
//event.srcElement.parentNode.removeChild(event.srcElement);
/*这里有个疑问，this到底指的是谁?,不同的语境和不同场景场合，this代表的含义也可能不同，这部分我还没有去深究，有空在去研究，参考网
页https://zhidao.baidu.com/question/683646917943611212.html和
http://www.jb51.net/article/111049.htm(javascript中this在不同语境中代表不同的含义)
*/
alert("this = " + this + " / " + "event.srcElement =" + event.srcElement);
/*
this写在某个过程内，哪个控件调用次过程，this就表示哪个控件。
this写在某个过程内，如果这个过程是动态生成的控件调用的，this表示此动态控件，如果是已有控件，this表示window。
*/
this.parentNode.removeChild(this);
}
function deleteMe2(myself){
alert(myself + " / " + "当前对象的value = " + myself.value);
}
//添加超链接
function addA(){
var aNode = document.createElement("A");//创建A超链接节点
aNode.href = "http://blog.****.net/czh500/article/details/51684483";
aNode.title = "囧囧的****博客";
aNode.target = "_blank";
var myTextNode = document.createTextNode("我的****博客！");
aNode.appendChild(myTextNode);
var brNode = document.createElement("br");//创建br节点
var br2Node = document.createElement("br");//创建br节点
var divNode = document.getElementById("myDiv");
divNode.appendChild(aNode);
insertAfter(brNode, aNode);
insertAfter(br2Node, brNode);
}
//功能: 在targetElement之后插入 新节点newElement
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
</script>
</head>
<body>
<input type="button" value="添加图片到div层中" onclick="addImg()">
<input type="button" value="删除div层中的最后一个图片" onclick="deleteImg()">
<input type="button" value="使用this关键字删除me" onclick="deleteMe()">
<input type="button" value="使用this关键字" onclick="deleteMe2(this)">
<input type="button" value="添加超链接" onclick="addA()">
<br><br>
<div id="myDiv" class="testDiv"></div>
</body>
</html>