创建元素
-
原生的js中的创建元素有三种方式:
1.1document.write("标签代码");
缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉
1.2innerHTML
1.3document.createElement("标签的名字");
然后使用appendChild()方法添加到页面 -
jQuery中创建元素的方式:
2.1 $(“标签的代码”)
2.2 对象.html(“标签的代码”);
添加元素
常用的五种方式:
注意append和appendTo的区别:
append方法把元素添加到另一个元素中的时候,有点剪切的效果,append是主动的关系,dv2主动要添加dv>p,而appendTo是被动关系:意思是a被添加到b中
append
添加到dv中$("#dv").append(Obj);
- 插入到
dv
前面:$("#dv").prepend(Obj);
- 把元素添加到当前元素的后面(兄弟元素来添加):
$("#dv").after(Obj);
- 把元素添加到当前元素的前面(兄弟元素来添加):
$("#dv").before(Obj);
- 在dv2中添加一个p使用appendTo来写:
var p = $("<p>这是一个p</p>"); $(p).appendTo("#dv2");
DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态创建元素的方法</title>
<script src="../jquery-1.12.2.js"></script>
<style>
div{
width: 200px;
height: 100px;
background-color: yellow;
margin-top: 20px;
}
</style>
<script>
/*
*
* DOM中创建元素:
* 1.document.write("标签代码");缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉
* 2.innerHTML
* 3.document.createElement("标签的名字");然后使用appendChild()方法添加到页面
*
* jQuery中创建元素的方式:
* 1.$("标签的代码")
* 2.对象.html("标签的代码");
*
* */
</script>
<script>
//需求:1.点击按钮,在div中创建一个超链接
//2.将dv中的p添加到dv2中去
$(function () {
var i = 0;
$("#btn").click(function () {
i++;
//创建元素
var Obj = $("<a href='http://www.baidu.com'>百度</a>");
//添加元素
//1.添加到dv中
// $("#dv").append(Obj);
//2.插入到dv前面
// $("#dv").prepend(Obj);
//3.把元素添加到当前元素的后面(兄弟元素来添加)
// $("#dv").after(Obj);
//4.把元素添加到当前元素的前面(兄弟元素来添加)
$("#dv").before(Obj);
//append方法把元素添加到另一个元素中的时候,有点剪切的效果
//append是主动的关系,dv2主动要添加dv>p
$("#dv2").append($("#dv>p"));//注意添加的是一个jq对象,而不是字符串
//5. 在dv2中添加一个p使用appendTo来写:
var p = $("<p>这是一个p</p>")
$(p).appendTo("#dv2");
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="创建元素" />
<div id="dv"><p>这是一个div</p></div>
<div id="dv2"></div>
</body>
</html>