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.csdn.net/czh500/article/details/51684483";
		aNode.title = "囧囧的csdn博客";
		aNode.target = "_blank";
		var myTextNode = document.createTextNode("我的csdn博客！");
		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()">&nbsp;&nbsp;
<input type="button" value="删除div层中的最后一个图片" onclick="deleteImg()">&nbsp;&nbsp;
<input type="button" value="使用this关键字删除me" onclick="deleteMe()">&nbsp;&nbsp;
<input type="button" value="使用this关键字" onclick="deleteMe2(this)">&nbsp;&nbsp;
<input type="button" value="添加超链接" onclick="addA()">&nbsp;&nbsp;
<br><br>
<div id="myDiv" class="testDiv"></div>
</body>
</html>
javaScript中createElement案例

猜你喜欢
