创建元素 3种 1- document.write(); 2- 对象.innerHTML 3- document.createElement()
根据id属性获取指定信息并注册点击事件
第一种方式
mFun$("btn").onclick = function(){ 第一种创建方式 document.write("<b>加粗标签</b>"); } 在页面加载完毕时,这是会创建一个元素,将页面中除了主体以外所有的内容都清除掉第二种方式
对象.innnerHTML = ""; mFun$("btn").onclick = function (){ mFun$("dv").innerHTML = "<p><b>心情不好就来砸电脑</b></p>"; }第三种方式
mFun$("btn").onclick = function(){ var objP = document.createElement("p"); console.log(objP); setInnerText(objP,"这是一个p"); //将子元素objP追加到父元素 div中 mFun$("dv").appendChild(objP); }效果图 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; cursor: pointer; } div { width: 200px; height: 400px; border: 2px solid red; } </style> </head> <body> <input type="button" value="创建列表" id="btn"/> <div id="dv"></div> <script src="common.js"></script> <script> var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "太极神功", "辟邪剑谱"]; //根据id属性获取指定元素注册点击事件 mFun$("btn").onclick = function(){ //创建ul var ul = document.createElement("ul"); //将ul追加到div中 mFun$("dv").appendChild(ul); //遍历kungfu数组,通过数组长度控制创建的li元素,并将数组元素赋值给li for(var i = 0; i < kungfu.length;i++){ //创建li var li = document.createElement("li"); //将数组中对应的元素作为标签内容赋值给li li.innerHTML = kungfu[i]; //将li追加到ul ul.appendChild(li); //为li注册移入事件 li.onmouseover = function(){ this.style.backgroundColor = "pink"; } //为li注册移出事件 li.onmouseout = function (){ this.style.backgroundColor = ""; } } } </script> </body> </html>