
<!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> |



