CODEWITHSUNDEEP
jquery
ConduciveMammal
ConduciveMammal

Reputation: 483

Append Value of Data-Attribute to Element

So I have some jQuery data-attributes that I can access but I need to append the values to an HTML element, but not too sure how to do it.

I'm using a Shopify app called Judge.Me for product reviews, using JS it puts in reviews for each product. There's no HTML markup that I enter in, just a script call.

In the email from support regarding the various elements, they said:

"We don't have Liquid variables for those data. However, they are available in our review widget's HTML, so you can extract them via JavaScript, jQuery."

The attribute I have is: $('.jdgm-rev-widg').data('average-rating') and I'd like to append the average-rating to a <h1></h1> element.

The code I have so far, albeit rather basic is:

<div class="score-board">
    <h1></h1>
</div>


jQuery(document).ready(function() {
  var $averageRating = $('.jdgm-rev-widg').data('average-rating')
  $('.score-board h1').append($averageRating);
 })

Upvotes: 0

Views: 2236

Answers (1)

Win
Win

Reputation: 5594

You're targeting your h1 incorrectly. Here's an example of how to target your h1 below. You can either use 

  $('.score-board > h1').append($averageRating);


jQuery(document).ready(function() {
  var $averageRating = $('.average-rating').data('average-rating');
  $('.score-board > h1').append($averageRating);
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="average-rating" data-average-rating="5"></div>
<div class="score-board">
  <h1></h1>
<div>

Upvotes: 1

Related Questions