YCR YCR - 1 month ago 12
Javascript Question

How to modify inner HTML with jquery without div Id

I have a process which automatically create html and js (rmarkdown).

I want to modify the inner html of my code, from 90 to 100.
I have jquery loaded so I can use it. My issue, here, is that the tag span that I want to modify don't have an id. How can I do this?

<div id="equities" class="section level3">
<h3>Equities</h3>
<div class="knitr-options" data-fig-width="576" data-fig-height="460">

</div>
<span class="value-output" data-icon="fa-pencil" data-color="#01bb69">90</span>
</div>

Answer

You have multiple ways to do that, for parent #id, class or attribute. The fastest way in this case is .class and the slowest is the parent #id.

You can choose what you think is better for your case:

$(document).ready(function() {
   $('.value-output').text('100');
   $('[data-icon="fa-pencil"]').text('100');
   $('#equities span').text('100');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="equities" class="section level3">
    <h3>Equities</h3>
    <div class="knitr-options" data-fig-width="576" data-fig-height="460">

    </div>
    <span class="value-output" data-icon="fa-pencil" data-color="#01bb69">90</span>
</div>

Comments