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
- 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
2 Answers
Reset to default 4Use 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>")
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744742145a4591090.html
评论列表（0条）