用JS增加页面标签和属性-CSDN博客

本文链接：https://blog.csdn.net/dfl_tx1999/article/details/84231403

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