jquery和JavaScript动态创建节点
来源：互联网 发布：android调用js方法 编辑：程序博客网 时间：2024/06/05 20:57
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);
- jquery和JavaScript动态创建节点
- javascript和jquery动态创建html元素
- javascript和jquery动态创建html元素
- jQuery动态创建节点元素
- jquery动态创建dom节点
- Javascript动态创建 style 节点
- Javascript动态创建/删除节点
- jquery和js创建节点
- javascript和jquery寻找节点
- JavaScript动态增加节点和删除节点
- jQuery动态创建元素以及追加节点
- JavaScript及jQuery选择器 + DOM创建节点
- jQuery创建节点和插入节
- jQuery和javascript获取临近节点方法
- jQuery和javascript获取临近节点方法
- jquery查找节点和创建节点的方式
- jQuery中动态创建元素节点无法触发事件
- jQuery中动态创建元素节点无法触发事件
- 1017. A除以B (20)--PAT乙级
- json-ajax-jsonp-cookie
- 深入理解C++中public、protected及private用法
- C语言堆和栈的区别
- 如何自学好编程
- jquery和JavaScript动态创建节点
- 【一步步学OpenGL 1】-《打开一个窗口》
- JAVA类连接JDBC mysql
- Java日记（7）— 访问控制符
- 51nod 1675 序列变换（莫比乌斯反演）
- 怎样进行可行性研究？
- Window安装Nginx并设置为开机启动
- Android Path相关APIs
- 加密篇
