JQuery插入DOM节点的方法

2023年6月10日下午12:22 • JavaScript

JQuery是一款操作DOM的JavaScript库，提供了很多操作DOM节点的方法，包括插入DOM节点的方法。以下是关于JQuery插入DOM节点的方法的完整攻略：

一、插入DOM节点的方法

在JQuery中，插入DOM节点的方法可以使用以下几种：

1.append()方法

append() 方法向被选元素的结尾（即作为其最后一个子元素）插入指定内容。

// 在id为example的元素内的结尾添加一段HTML代码
$('#example').append('<p>这段文字将被添加到id为example的元素末尾</p>');

// 在id为example的元素内的结尾添加一个新的<strong>元素
$('#example').append('<strong></strong>');

// 在id为example的Strong元素内的结尾添加一个文本节点
$('#example strong').append('这是一个文本节点');

2.prepend()方法

prepend() 方法向被选元素的开头（即作为其第一个子元素）插入指定内容。

// 在id为example的元素内的开头添加一段HTML代码
$('#example').prepend('<p>这段文字将被添加到id为example的元素开头</p>');

// 在id为example的元素内的开头添加一个新的<strong>元素
$('#example').prepend('<strong></strong>');

// 在id为example的Strong元素内的开头添加一个文本节点
$('#example strong').prepend('这是一个文本节点');

3.after()方法

after() 方法在被选元素之后插入指定内容。

// 在id为example的元素之后添加一段HTML代码
$('#example').after('<p>这段文字将被添加到id为example元素后面</p>');

// 在id为example的元素之后添加一个新的<strong>元素
$('#example').after('<strong></strong>');

// 在id为example的Strong元素之后添加一个文本节点
$('#example strong').after('这是一个文本节点');

4.before()方法

before() 方法在被选元素之前插入指定内容。

// 在id为example的元素之前添加一段HTML代码
$('#example').before('<p>这段文字将被添加到id为example元素前面</p>');

// 在id为example的元素之前添加一个新的<strong>元素
$('#example').before('<strong></strong>');

// 在id为example的Strong元素之前添加一个文本节点
$('#example strong').before('这是一个文本节点');

二、使用示例

下面提供两个使用示例，可以帮助更好地理解JQuery插入节点的方法。

示例1

<body>
  <h1 id="title">JQuery插入节点示例</h1>
  <div id="container"></div>
  <script>
    // 在id为container的div元素内部结尾添加一个新的p元素
    $('#container').append('<p>Hello World!</p>');
  </script>
</body>

上面的示例在页面加载时，使用JQuery的append()方法向id为container的div元素内部结尾添加了一个新的p元素，p元素中的文本内容为"Hello World!"。

示例2

<body>
  <h1 id="title">JQuery插入节点示例</h1>
  <div id="container">
    <p>我是第一个p元素</p>
  </div>
  <script>
    // 在id为container的div元素内部结尾添加一个新的p元素
    $('#container').append('<p>我是第二个p元素</p>');

    // 在id为container的div元素内部开头添加一个新的p元素
    $('#container').prepend('<p>我是第一个p元素</p>');
  </script>
</body>

上面的示例在页面加载时，使用JQuery的append()方法向id为container的div元素内部结尾添加了一个新的p元素，p元素中的文本内容为"我是第二个p元素"；同时，还使用JQuery的prepend()方法向id为container的div元素内部开头添加了一个新的p元素，p元素中的文本内容为"我是第一个p元素"。

通过这两个示例，我们可以看到JQuery插入节点的方法非常简单，只需要调用相应的方法，并传入要插入的内容即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery插入DOM节点的方法 - Python技术站