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>

我像这样var mydiv = $("#a")[0];查询div，然后我想在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>")

这会在不需要的每个<h2>H2</h2>之后添加<h1>H1</h1>，我只需要在选定的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 个答案: