用JS增多页面标签和属性
日期：2014-05-16 浏览次数：20347 次
用JS增加页面标签和属性
<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>
?? <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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
