如何使用 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> 这不是我需要做的，我只需要在选定的 div 中添加 <h2>H2</h2> 在这种情况下是 myDiv

Answer 1

使用jQuery#after and 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 以对象作为目标在特定元素之后追加元素？

How do I append an element after a specific element using jquery with an object as the target?

html

javascript

jquery

element