提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

jQuery添加dom节点的方法

jQuery
2023-02-25 18:20:25 时间

一、内部插入DOM：

完整示例1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery添加dom节点方法一 -青梅博客</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="box">
    <span>青梅煮码</span>
</div>

<script type="text/javascript">
    //内部前插入
    $(".box").prepend("<p>青梅工作室</p>");
    //内部后插入
    $(".box").append("<p>青梅博客 (www.qmblog.cn)</p>");
</script>
</body>
</html>

jQuery部分：

① 内部前插入DOM (prepend)

$(".box").prepend("<p>青梅工作室</p>");

② 内部后插入DOM (append)

$(".box").append("<p>青梅博客</p>");

二、外层插入：

完整示例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery添加dom节点方法二 -青梅博客</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="box">
    <span>享学独立站</span>
</div>

<script type="text/javascript">
    //外层前插入
    $(".box").before("<h1>微信公众号：</h1>");
    //外层后插入
    $(".box").after("<p>关注公众号,关注独立站出海！</p>");
</script>
</body>
</html>

jQuery部分：

① 外层前插入DOM (before)

$(".box").before("<h1>微信公众号：</h1>");

② 外层后插入DOM (after)

$(".box").after("<p>关注公众号,关注独立站出海！</p>");

三、元素包裹

完整示例 3：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery添加dom节点方法三 -青梅博客</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="box">
    <span class="qmzm">青梅博客</span>
</div>

<script type="text/javascript">
    //元素包裹
    $(".qmzm").wrap("<a href='http://www.qmblog.cn'></a>");
</script>
</body>
</html>

jQuery部分：

元素包裹DOM (wrap)

$(".qmzm").wrap("<a href='http://www.qmblog.cn'></a>");

相关文章