CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to extract some specific content from the html response

I wrote a listener for a button as shown below 

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

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

console.log(htmlString);

});

The result of above htmlString is 

<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>

Right now i got three rows of data mentioned above

My requirement is that on click of a button , i need to add one more row of the whole thing (incrementing the number under h6) so taht it look like this , and append it to the existing 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>

I am able to get the count of the last h6 using this way , but couldn't able to proceed on how to add this new content back to the existing 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>

Could anybody please help ??

Upvotes: 0

Views: 38

Answers (1)

Matas Vaitkevicius
Matas Vaitkevicius

Reputation: 61401

Div append should do it.

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>')

Upvotes: 1

Related Questions