jQuery - Update string of HTML

Question

I have a web page that uses jQuery. In this app, I have a function that takes in an HTML string. This HTML string is dynamically generated. But, I know I want to update the class list on one of the elements in the HTML. An example of the HTML string would be something like this:

<p>This is a test</p><div class="example" data-id="1">example</div> <p>This is only a test.</p>

I want to find the element within this string with a specific data-id value, and update its class list. In an effort to isolate my issue, I've created this Fiddle, which include the following code:

function updateHtml(html, id) {
  var tree = $(html);
  var updatedHtml = html;

  var leaf = $(tree).find('div[data-id="' + id + '"]');
  if (leaf) {
    $(leaf).attr('class', 'example complete');  
    updatedHtml = $(tree).html();
  }

  return updatedHtml;
}

When you run the Fiddle, you'll notice that the classes do not actually change. Why not? I can't tell what I'm doing wrong. The example in the Fiddle never changes from gray to green like I'd expect based on the code above. What am I missing?

You've taken the HTML as a string, and then you're updating that string, why would the elements on the page be affected by what you do to a random string? The function doesn't return anything either. — adeneo
– adeneo, Commented Nov 23, 2016 at 18:40
@adeneo Fair assessment. I got in a hurry. I've updated the Fiddle and question text. — user687554
– user687554, Commented Nov 23, 2016 at 18:47
Do you really need the HTML as a string, why not just add the class directly, if you want to affect the DOM anyway? — adeneo
– adeneo, Commented Nov 23, 2016 at 18:50

Ibrahim Khan · Accepted Answer · 2016-11-23 18:53:50Z

1

You don't need to update html. You can just add the classes like following.

function updateClass() {
    var $elm = $('#myElement'); 
    updateHtml($elm, 1)
}

function updateHtml($elm, id) {  
    var leaf = $elm.find('div[data-id="' + id + '"]');
    if (leaf) {
        $(leaf).addClass('example complete');  
    }
}

.example {
    background-color:lightgray;
    border: solid 2px #000;
    padding:12px;
}

.complete {
    background-color:green;
    color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div id="myElement">
        <p>This is a test</p>
        <div class="example" data-id="1">example</div>     
        <p>This is only a test.</p>
    </div>
    <br />

    <button class="btn btn-primary" onclick="updateClass()">
        Run
    </button>
</div>

edited Nov 23, 2016 at 18:53

answered Nov 23, 2016 at 18:48

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ksealey · Accepted Answer · 2016-11-23 18:46:19Z

0

function updateHtml(html, id) {
  $('div[data-id="' + id + '"]').addClass("complete").html(html);
}

answered Nov 23, 2016 at 18:46

ksealey

1,7381 gold badge17 silver badges16 bronze badges

Comments

Shailendra · Accepted Answer · 2016-11-23 19:24:44Z

I checked your example in Fiddle and made following updates, you can try the following code and it should work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="myElement">
    <p>This is a test</p><div class="example" data-id="1">example</div> <p>This is only a test.</p>
  </div>
  <br />

  <button class="btn btn-primary" onclick="return updateClass();">
    Run
  </button>
</div>
<script>
function updateClass() {
  var html = $('#myElement').html();
 
  var newHtml = updateHtml(html, '1');
  $('#myElement').html(newHtml);  
}

function updateHtml(html, id) {
    
  var updatedHtml = html;
  var $html = $('<div />',{html:html});
  $html.find('div[data-id="' + id+'"]').addClass("example complet");
    
  return $html;
}
</script>

Collectives™ on Stack Overflow

jQuery - Update string of HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related