如何在该部分之后插入新创建的 HTML 字符串 </header>

Question

>我有一个标题部分，如下所示

<header>
<div class="my-items">
<i class="my-cart"></i>
<div>1</div>
</div>
<h1>My Cart</h1>
</header>

我想在该部分之后插入新创建的 HTML 字符串 这样它看起来像

<header>
<div class="my-items">
<i class="my-cart"></i>
<div>1</div>
</div>
<h1>My Cart</h1>
</header>
<p>This is a paragraph.</p>

https://jsfiddle.net/w8ypx7tu/1/

我试过使用插入后

$(document).ready(function() {
var htmlStr = '<p>This is a paragraph.</p>';
$(htmlStr).insertAfter(".my-cart");
});

而不是附加，我想使用 .html(( 以便它在存在任何东西时替换

Answer 1

尝试insertAfter('header')

var htmlStr = '<p>This is a paragraph.</p>';
$(htmlStr).insertAfter('header:has(.my-cart)');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="my-items">
<i class="my-cart"></i>
<div>1</div>
</div>
<h1>My Cart</h1>
</header>

Answer 2

您可以更改为使用after

$(document).ready(function() {
var htmlStr = '<p>This is a paragraph.</p>';
$('header').after(htmlStr);
});

$(document).ready(function() {
var htmlStr = '<p>This is a paragraph.</p>';
$('header').after(htmlStr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="my-items">
<i class="my-cart"></i>
<div>1</div>
</div>
<h1>My Cart</h1>
</header>