Jquery 如何从html响应中提取某些特定内容

我为按钮编写了一个侦听器，如下所示

$(document).on("click", ".btnclick", function() {

var htmlString = $("div#"+id_attr_val+".Topping-details").eq(0).html(); 

console.log(htmlString);

});

上述htmlString的结果是

<h6 class="tdHeading">Regular, 50 Ml 1</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

<h6 class="tdHeading">Regular, 50 Ml 2</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

<h6 class="tdHeading">Regular, 50 Ml 3</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

常规，50毫升1
普通，50毫升2
普通，50毫升3

现在我得到了上面提到的三行数据

我的要求是，点击一个按钮，我需要再添加一行整个内容（增加h6下的数字） 所以它看起来像这样，并将其附加到现有的htmlString中

<h6 class="tdHeading">Regular, 50 Ml 4</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

常规，50毫升4

我可以通过这种方式获得上一个h6的计数，但无法继续将此新内容添加回现有的htmlString

var n = $("div#"+id_attr_val+".Topping-details h6").length ;

<h6 class="tdHeading">Regular, 50 Ml 4</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

var n=$（“div#“+id_attr_val+”.Topping details h6”）。长度；
普通，50毫升4

---

有谁能帮忙吗？？？

Div-append应该做这件事

var n = $("div#"+id_attr_val+".Topping-details h6").length ;
var text1 = $('.secclass a')[0].text;
var text2 = $('.secclass a')[1].text;
$("div#"+id_attr_val+".Topping-details h6").parent().append('<h6 class="tdHeading">Regular, 50 Ml '+n+'</h6>    <i id="topping-close"></i><img src="images/arrow-topping.png">    <section class="secclass"><a href="#">+text1 +</a></section>    <section class="secclass"><a href="#">+text2 +</a></section>')

var n=$（“div#“+id_attr_val+”.Topping details h6”）。长度；
var text1=$（'.secclass a'）[0].text；
var text2=$（'.secclass a'）[1].text；
$（“div#“+id_attr_val+”.Topping details h6”）.parent（）.append（'Regular，50ml'+n+''）

谢谢你的回答，这两种价值观的蜂蜜加卡梅尔10毫升和蜂蜜加巧克力酱10毫升可能因成分不同而有所不同，因此我需要将其提取出来。非常感谢，但这一新的部分将添加到之前的所有部分中，我只想将其附加到现有内容的末尾（结尾）1.非常感谢，这是我所需要的。你救了我一命。是否可以动态提取text1和text2值？非常感谢，secclass可以有n个元素，这意味着这不是固定的。