- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- title
- </title>
- <style>
- div { width: 200px; height: 150px; border: 1px solid pink; }
- </style>
- </head>
- <body>
- <input type="button" value="创建 p" id="btn" />
- <div id="dv">
- </div>
- <script src="common.js">
- </script>
- <script>
- my$("btn").onclick = function() {
- // 创建元素
- var pObj = document.createElement("p");
- pObj.innerText = ("这是一个 p");
- // setInnerText(pObj, "这是一个 p");
- // 把创建后的子元素追加到父级元素中
- my$("dv").appendChild(pObj);
- };
- </script>
- </body>
- </HTML>
案例 4: 点击按钮, 动态的创建列表, 鼠标滑过高亮
如果是循环的方式添加事件, 推荐用命名函数
如果不是循环的方式添加事件, 推荐使用匿名函数
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- title
- </title>
- <style>
- * { margin: 0; padding: 0; } div { width: 200px; height: 400px; border:
- 2px solid pink; } ul { list-style-type: none; cursor: pointer; }
- </style>
- </head>
- <body>
- <input type="button" value="创建动态列表" id="btn" />
- <div id="dv">
- </div>
- <!-- <input type="button" value="创建列表" id="btn"/>
- <div id="dv">
- </div>
- -->
- <script src="common.js">
- </script>
- <script>
- // 点击按钮动态的创建列表, 把列表加到 div 中
- var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经"];
- my$("btn").onclick = function() {
- // 创建 ul, 把 ul 立刻加入到父级元素 div 中
- var ulObj = document.createElement("ul");
- my$("dv").appendChild(ulObj); // 追加子元素
- // 动态的创建 li, 加到 ul 中
- for (var i = 0; i < kungfu.length; i++) {
- var liObj = document.createElement("li");
- // 设置 li 中间的文字内容
- liObj.innerHTML = kungfu[i];
- ulObj.appendChild(liObj);
- // 为 li 添加鼠标进入和离开事件
- liObj.onmouseover = mouseoverHandle;
- liObj.onmouseout = mouseoutHandle;
- }
- };
- // 此位置. 按钮的点击事件的外面
- function mouseoverHandle() {
- this.style.backgroundColor = "hotpink";
- }
- function mouseoutHandle() {
- this.style.backgroundColor = "";
- }
- // 如果是循环的方式添加事件, 推荐用命名函数
- // 如果不是循环的方式添加事件, 推荐使用匿名函数
- </script>
- </body>
- </HTML>
案例 5: 点击按钮创建一个表格
自己给自己 debug 好久, 才发现没有把创建的 2 个列放进 for 循环
来源: http://www.bubuko.com/infodetail-3319852.html