jQuery添加dom节点的方法

2023-01-16 13:32:35 浏览数 (8)

一、内部插入DOM：

完整示例1:

代码语言：javascript复制
<!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)

代码语言：javascript复制
$(".box").prepend("<p>青梅工作室</p>");

② 内部后插入DOM (append)

代码语言：javascript复制
$(".box").append("<p>青梅博客</p>");

二、外层插入：

完整示例2：

代码语言：javascript复制
<!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)

代码语言：javascript复制
$(".box").before("<h1>微信公众号：</h1>");

② 外层后插入DOM (after)

代码语言：javascript复制
$(".box").after("<p>关注公众号,关注独立站出海！</p>");

三、元素包裹

完整示例 3：

代码语言：javascript复制
<!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)

代码语言：javascript复制
$(".qmzm").wrap("<a href='http://www.qmblog.cn'></a>");
jquery

0 人点赞