jquery和JavaScript动态创建节点

最新推荐文章于 2023-03-14 12:35:19 发布

XLjiqimaobuchiyu

最新推荐文章于 2023-03-14 12:35:19 发布

阅读量482

点赞数

分类专栏： JavaScript jQuery 文章标签： javascript jquery DOM节点

本文链接：https://blog.csdn.net/XLjiqimaobuchiyu/article/details/77986122

版权

jQuery 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

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">

</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">

</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);

XLjiqimaobuchiyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery和JavaScript动态创建节点

jquery和JavaScript动态创建节点div{width: 200px;height:200px;background-color: #FF0000;}百度一下，你就知道现在通过JavaScript和jQuery分别动态创建a标签节点；JavaScript动态创建节点：div
复制链接

扫一扫

专栏目录