admin管理员组

文章数量:1389754

I want to append an element of H2 <h2>H2</h2> to the html as shown below 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src=".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>

I query the div like this var mydiv = $("#a")[0]; and then I want to append <h2>H2</h2> inside myDiv, but after <h1>H1</h1> OR before <h3>H3</h3>. I have played around a bit with after(), insertAfter(), before(), insertBefore() with no luck, because i want to target and use the object 'myDiv' and not the whole html page.

EDIT: Some things I have tried

I have tried the following:

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

This adds the element to the end of the div

Also tried this:

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

This adds <h2>H2</h2> after every <h1>H1</h1> which is not what I need to do, I need to add <h2>H2</h2> only inside the selected div which in this case is myDiv

I want to append an element of H2 <h2>H2</h2> to the html as shown below 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis./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>

I query the div like this var mydiv = $("#a")[0]; and then I want to append <h2>H2</h2> inside myDiv, but after <h1>H1</h1> OR before <h3>H3</h3>. I have played around a bit with after(), insertAfter(), before(), insertBefore() with no luck, because i want to target and use the object 'myDiv' and not the whole html page.

EDIT: Some things I have tried

I have tried the following:

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

This adds the element to the end of the div

Also tried this:

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

This adds <h2>H2</h2> after every <h1>H1</h1> which is not what I need to do, I need to add <h2>H2</h2> only inside the selected div which in this case is myDiv

  • javascript
  • jquery
  • html
  • element
Share Improve this question edited Apr 11, 2019 at 17:04 Vergil C. asked Apr 11, 2019 at 16:52 Vergil C.Vergil C. 1,1143 gold badges19 silver badges30 bronze badges 2
  • Always show what you have tried that isn't working – charlietfl Commented Apr 11, 2019 at 16:58
  • I have edited now with some things I have tried, problem is the target. I want to target the slected div and not thw whole html page. Thi is a sample, in the real html page I have multiple H1s and using after would ad H2s after every H1, same with before() and H3s. – Vergil C. Commented Apr 11, 2019 at 17:07
Add a ment  | 

2 Answers 2

Reset to default 4

Use jQuery#after and jQuery#find

var myDiv = $("#a")[0];
$(myDiv).find('h1').after("<h2>H2</h2>");
<script src="https://cdnjs.cloudflare./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>

or

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

or

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

Your code is correct, only need change the selector adding h1 in the myDiv selector.

Example:

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

本文标签：

版权声明：本文标题：javascript - How do I append an element after a specific element using jquery with an object as the target? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744742144a2622671.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。