jquery和JavaScript动态创建节点

最新推荐文章于 2023-09-21 15:48:58 发布

原创最新推荐文章于 2023-09-21 15:48:58 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #DOM节点

jQuery 同时被 2 个专栏收录

11 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript和jQuery动态创建a标签节点，并对比了两种方法的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>