Modifying innerHTML from 3rd Party Script

Question

I have a 3rd party script that is importing a menu and I cannot edit this 3rd party script. It generates code like this:

<div id="wmenu-updated" style="display: block;">
  <small>Menu updated</small>
  <span innerhtml="19 hours ago"></span>
</div>

It should take 19 hours ago and display that as text inside the span but for whatever reason it doesn't work and the makers of the script are little help in fixing the error.

Is there a way, using jQuery, that once the page loads I can take the innerhtml and spit it out as text inside that span?

Cabbala

Answer 1

$( document ).ready( function () {
    $( '#wmenu-updated span' ).text( function () {
        return $( this ).attr( 'innerhtml' );
    });
});

You can use jQuery's text function to update the text in the span

Serrell

That did it! Thank You! I did have to change the $( document ).ready to $(window).load because the 3rd party script wasn't loaded before the other script ran. – Cabbala

@bobthecow's answer using span[innerhtml] looks better – Bess

@Bess Why would you say that? His combination of selectors and find will execute slower. Not to mention an id of #wmenu-updated was provide, so I'm assuming that this will be the only case. – Serrell

An interesting "behavior" of selectors is that they are evaluated right to left, so the id might not help much. $('#wmenu-updated').find('span') should work better. Also I agree that [innerhtml] doesn't add much value in the OP's example, but I am assuming that it is has been simplified for the forum (as the OP says, "code like this"). – Bess

What you are talking about is CSS behavior, not Sizzles behavior. – Serrell

-1 I'll be happy to convert it to an upvote if you prove your point (as I'll have learnt something), but in my book your last comment just confirms that this is the wrong answer. See #13679202 – Bess

Answer 2

Use $.attr() and $.text() to achieve this

$(document).ready(function(){
   var txt = $("#wmenu-updated span").attr("innerhtml");
   $("#wmenu-updated span").text(txt);
});

Hildebrandt

Answer 3

You can try this one: fiddle

 $(function(){
    $(document).children('#wmenu-updated').find('span[innerhtml]')
    .text($(this).attr("innerhtml"));
 });

or more simple like this:

$('span[innerhtml]').text($('span[innerhtml]').attr('innerhtml'));

Weinberger

Side note: That's not what <kbd> is for, although it may look spiffy. – Pilgrim

Answer 4

Try this:

$(document).ready( function ( e ) {
    var q = $('span').attr('innerhtml');
    $('#wmenu-updated').children('span').text( q );
});

Liftoff

Answer 5

Lots of people are getting it close :)

This will do it for you:

$('selector').find('span[innerhtml]').each(function() {
    $(this).html($(this).attr('innerhtml'));
});

jsFiddle here.

And this is functionally equivalent:

$('selector').find('span[innerhtml]').html(function() {
    return $(this).attr('innerhtml');
});

Oblate

Answer 6

$("#wmenu span").attr("innerhtml", "Your Update here");

Tita

This only updates the attribute, but does not spew it out as the text of the span. – Fitz

then do this: $("#wmenu span").text("Your Update here"); – Tita

Please update your answer to reflect this. However, the OP's question is about updating the test with the attribute value. And not updating either with a new value. – Fitz

And if you have several spans, you may also be more specific like $("#wmenu span:first").text("Your Update here"); – Tita