<html>
<head>
<title>innerHtml</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
</head>
<script type="text/javascript" src="dojo-release-1.1.1/dojo/dojo.js"></script>
<script type="text/javascript" language="javascript">
function change_content(){
var str="chang content!<br>";
var temp=document.getElementById("old_div");
temp.innerHTML=str;
var new_span=document.createElement("span");
new_span.setAttribute("id","new_span");
new_span.setAttribute("class","color1");
//new_span.id="new_span";
var new_text=document.createTextNode("This is a new node!");
new_span.appendChild(new_text);
temp.appendChild(new_span);
temp = document.getElementById("add_content");
temp.setAttribute("value","改变颜色");
temp.setAttribute("onclick","change_color()");
}
function change_color(){
var temp = document.getElementById("new_span");
temp.setAttribute("class","color2");
}
</script>
<style>
.color1{
background-color:yellow;
}
.color2{
background-color:red;
}
</style>
<body>
<div id="old_div">No content!</div>
<input type="button" id="add_content" onclick="change_content()" value="内容"/><br/>
<input type="button" value="换色" onclick="change_color();"/>
</body>
</html>
用JS增加页面标签和属性
最新推荐文章于 2024-10-01 20:12:28 发布