<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > |
<html> |
<head> |
<title>给div中添加文本元素</title> |
<style type= "text/css" > |
div{ |
border: 1px solid blue; |
background-color: green; |
width: 300px; |
height: 150px; |
} |
</style> |
|
|
<script type= "text/javascript" > |
function demo(){ |
//在这个方法中主要是给div中添加文本元素 |
//先创建一个文本节点 |
var textNode = document.createTextNode( "我是动态添加进来的" ); |
//获取div对象 |
var divNode = document.getElementById( "div" ); |
//给div添加文本元素 |
divNode.appendChild(textNode); |
} |
function demo2(){ |
//在这个方法中主要是给div中添加文本元素 |
//先创建一个超链接对象 |
var aNode = document.createElement( "a" ); |
aNode.href = "http://sh.itcast.cn" ; |
//aNode.setAttribute("href","http://sh.itcast.cn"); |
aNode.innerHTML = "上海传智播客" ; |
|
//获取div对象 |
var divNode = document.getElementById( "div" ); |
//给div添加文本元素 |
divNode.appendChild(aNode); |
} |
|
|
</script> |
</head> |
|
<body> |
<div id= "div" > |
我是动态添加进来的 |
<a href= "#" >超链接</a> |
</div> |
<input type= "button" value= "给div上添加文本" onclick= "demo()" /> |
<input type= "button" value= "给div上添加超链接" onclick= "demo2()" /> |
|
</body> |
</html> |