jquery和JavaScript动态创建节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height:200px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div>
<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
</div>
</body>
</html>
现在通过JavaScript和jQuery分别动态创建a标签节点;
JavaScript动态创建节点:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height:200px;
background-color: #FF0000;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body>
<div id="box">
<!--<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>-->
</div>
<script>
$(function(){
var box=document.getElementById("box")//获取到box元素
var a= document.createElement("a");//创建一个a标签(节点)
box.appendChild(a);//通过appendChild把a标签添加到div里
a.setAttribute("href","http://www.baidu.com");//通过setAttribute设置a标签的属性和属性值
a.setAttribute("target","_blank");
a.innerHTML="百度一下你就知道";
});
</script>
</body>
</html>
jQuery动态创建节点:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height:200px;
background-color: #FF0000;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body>
<div id="box">
<!--<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>-->
</div>
<script>
$(function(){
// var box=document.getElementById("box")
// var a= document.createElement("a");
// box.appendChild(a);
// a.setAttribute("href","http://www.baidu.com");
// a.setAttribute("target","_blank");
// a.innerHTML="百度一下你就知道";
$("div").append('<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>');
});
</script>
</body>
</html>
相对于JavaScript动态创建节点,jQuery直接封装了append方法,直接调用使用即可,不需要单独去创建a标签;jQuery创建节点实质上过程为:
var $li =$('<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>');
$("div").append($li);