如何使用jquery以对象作为目标在特定元素后追加元素？

Question

我想将一个H2 <h2>H2</h2>的元素附加到html，如下所示

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="a">
        <h1>H1</h1>
        <!--I want to add H2 here-->
        <h3>H3</h3>
    </div>
    <div id="b">

    </div>
</body>
</html>

我查询div这样的var mydiv = $("#a")[0]; 然后我想在myDiv中附加<h2>H2</h2> ，但在<h1>H1</h1>或<h3>H3</h3> 。 我玩过after（），insertAfter（），before（），insertBefore（）没有运气，因为我想定位并使用对象'myDiv'而不是整个html页面。

编辑：我尝试过的一些事情

我尝试过以下方法：

var myDiv = $("#a")[0]
$(myDiv).append("<h2>H2</h2>")

这会将元素添加到div的末尾

还试过这个：

$("h1").after("<h2>H2</h2>")

这会在每个<h1>H1</h1> <h2>H2</h2>之后添加<h2>H2</h2> ，这不是我需要做的，我需要在所选的div中添加<h2>H2</h2> ，在这种情况下是myDiv

Answer 1

使用jQuery#after和jQuery#find

 var myDiv = $("#a")[0]; $(myDiv).find('h1').after("<h2>H2</h2>");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="a"> <h1>H1</h1> <!--I want to add H2 here--> <h3>H3</h3> </div> <div id="b"></div>

要么

$("#a").find("h1").after("<h2>H2</h2>");

要么

$("#a h1").after("<h2>H2</h2>");

Answer 2

您的代码是正确的，只需要在myDiv选择器中更改选择器添加h1。

例：

var myDiv = $("#a h1")[0] $(myDiv).after("<h2>H2</h2>")

如何使用jquery以对象作为目标在特定元素后追加元素？

问题描述

2 个解决方案

解决方案1
4 已采纳 2019-04-11 16:57:21

解决方案2
0 2019-04-11 17:13:55

如何使用jquery以对象作为目标在特定元素后追加元素？

问题描述

2 个解决方案

解决方案1 4 已采纳 2019-04-11 16:57:21

解决方案2 0 2019-04-11 17:13:55

解决方案1
4 已采纳 2019-04-11 16:57:21

解决方案2
0 2019-04-11 17:13:55