元素创建

最新推荐文章于 2023-12-07 15:12:52 发布

LW0512

最新推荐文章于 2023-12-07 15:12:52 发布

阅读量131

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/LW0512/article/details/108910736

版权

dom 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

元素创建

创建元素 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>