jQuery的DOM操作之创建和插入对象

听海边涛声

于 2024-09-07 15:36:00 发布

阅读量585

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/panghuangang/article/details/141995751

版权

语法说明

append(element)：添加成最后一个子元素，两者之间是父子关系
prepend(element)：添加成第一个子元素，两者之间是父子关系。
$('<A id="id1">aaa</A>')：创建A元素对象，同时可以给对象添加属性和标签体。
before(element)：添加到当前元素的前面，两者之间是兄弟关系。
after(element)：添加到当前元素的后面，两者之间是兄弟关系。
insertBefore(element)：把元素添加到另外一个元素的前面，两者之间是兄弟关系。
insertAfter(element)：把元素添加到另外一个元素的后面，两者之间是兄弟关系。

示例

append(element)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="sz" name="shenzhen">深圳</li>
  </ul>
  <br><br>
  <ul id="hobby">
    <li id="pb" name="paobu">跑步</li>
    <li id="yy" name="youyong">游泳</li>
  </ul>

  <script>
    const $city = $('#city')
    const $paobu = $('#pb')
    $city.append($paobu)
  </script>
</body>

</html>

在这里插入图片描述

prepend(element)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="sz" name="shenzhen">深圳</li>
  </ul>
  <br><br>
  <ul id="hobby">
    <li id="pb" name="paobu">跑步</li>
    <li id="yy" name="youyong">游泳</li>
  </ul>

  <script>
    $('#city').prepend($('#pb'))
  </script>
</body>

</html>

在这里插入图片描述

before(element)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="sz" name="shenzhen">深圳</li>
  </ul>
  <br><br>
  <ul id="hobby">
    <li id="pb" name="paobu">跑步</li>
    <li id="yy" name="youyong">游泳</li>
  </ul>

  <script>
    $('#sh').before($('<li id="ms" name="moshou">魔兽</li>'))
  </script>
</body>

</html>

在这里插入图片描述

after(element)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="sz" name="shenzhen">深圳</li>
  </ul>
  <br><br>
  <ul id="hobby">
    <li id="pb" name="paobu">跑步</li>
    <li id="yy" name="youyong">游泳</li>
  </ul>

  <script>
    $('#sh').after($('<li id="ms" name="moshou">魔兽</li>'))
  </script>
</body>

</html>

在这里插入图片描述

insertBefore(element)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="sz" name="shenzhen">深圳</li>
  </ul>
  <br><br>
  <ul id="hobby">
    <li id="pb" name="paobu">跑步</li>
    <li id="yy" name="youyong">游泳</li>
  </ul>

  <script>
    $('<li id="ms" name="moshou">魔兽</li>').insertBefore($('#sh'))
  </script>
</body>

</html>

在这里插入图片描述

insertAfter(element)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="sz" name="shenzhen">深圳</li>
  </ul>
  <br><br>
  <ul id="hobby">
    <li id="pb" name="paobu">跑步</li>
    <li id="yy" name="youyong">游泳</li>
  </ul>

  <script>
    $('<li id="ms" name="moshou">魔兽</li>').insertAfter($('#sh'))
  </script>
</body>

</html>