Question

I have this html:

<span class="msg-container">
  <span class="msg"></span>
  A message here
</span>

I’m wanting to use jQuery to find all the msg-container elements, take the “A message here” text and set the title attribute and remove the “A message here” text node.

So, after executing, my DOM should look like this:

<span class="msg-container" title="A message here">
  <span class="msg"></span>
</span>

How do I achieve this?

Answer 1

 $('.msg-container').each(function(){
      var that = $(this);
      that.attr('title', that.text());
      var children = that.find('.msg').clone();
      that.html('').append(children);
 });