//给box追加文本内容
var box = document.getElementById(‘box’);
box.innerHTML = ‘新内容

新标签

‘;
//点击按钮,在div中创建一个图片
my$(“btn”).onclick=function () {
my$(“dv”).innerHTML=”美女“;
};

案例：点击按钮创建列表

  1.     <button id="btn">按钮</button>
  2.     <div id="dv"></div>
  3.     <script>
  4.         var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
  5.         document.getElementById("btn").onclick = function () {
  6.             var str = "<ul style='list-style-type: none; cursor: pointer'>";
  7.             //根据循环创建对应对数的li
  8.             for (var i = 0; i < names.length; i++) {
  9.                 str += "<li>" + names[i] + "</li>";
  10.             }
  11.             str += "</ul>";
  12.             document.getElementById("dv").innerHTML = str;
  13.             //代码执行到这里,li已经有了
  14.             //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
  15.             var list = document.getElementById("dv").getElementsByTagName("li");
  16.             for (var i = 0; i < list.length; i++) {
  17.                 //鼠标进入
  18.                 list[i].onmouseover = function () {
  19.                     this.style.backgroundColor = "yellow";
  20.                 };
  21.                 //鼠标离开
  22.                 list[i].onmouseout = function () {
  23.                     this.style.backgroundColor = "";
  24.                 };
  25.             }
  26.         };
  27.     </script>

test.gif

案例.二级联动

  1. <body>
  2.      <select id="city">
  3.         <option value="bj">北京</option>
  4.         <option value="tj">天津</option>
  5.         <option value="sh">上海</option>
  6.      </select>
  8.      <select id="area">
  9.         <option value="hd">海淀</option>
  10.         <option value="cy">朝阳</option>
  11.         <option value="dc">东城</option>
  12.      </select>
  13.   </body>
  16.   <script type="text/javascript">
  17.         var selectCity = document.getElementById("city");
  18.         var selectArea = document.getElementById("area");
  19.         selectCity.onchange=function(){
  20.             var optionVal = selectCity.value;
  21.             if(optionVal=="bj"){
  22.                 selectArea.innerHTML = "<option value='hd'>海淀</option><option value='cy'>朝阳</option><option value='dc'>东城</option>";
  23.             }
  24.             else if(optionVal=="tj"){
  25.                 selectArea.innerHTML = "<option value='hk'>南开</option><option value='hx'>河西</option><option value='hd'>河东</option>";
  26.             }
  27.             else{
  28.                 selectArea.innerHTML = "<option value='pd'>浦东</option><option value='yp'>杨浦</option><option value='px'>浦西</option>";
  29.             }
  30.         };
  31.   </script>

test.gif