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?

score 6 · Accepted Answer · answered Feb 11 '13 at 04:49

6

$( 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

answered Feb 11 '13 at 04:49

whitneyit

1,226
8
17

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. – L84 Feb 11 '13 at 05:04
@bobthecow's answer using span[innerhtml] looks better – Christophe Feb 11 '13 at 17:41
@Christophe 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. – whitneyit Feb 11 '13 at 23:27
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"). – Christophe Feb 11 '13 at 23:36
What you are talking about is CSS behavior, not Sizzles behavior. – whitneyit Feb 11 '13 at 23:37
-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 http://stackoverflow.com/questions/13678702/how-is-the-jquery-selector-foo-a-evaluated – Christophe Feb 12 '13 at 00:13

score 6 · Answer 2 · answered Feb 11 '13 at 04:53

6

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

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

answered Feb 11 '13 at 04:53

Hary

5,690
7
42
79

Jai · Answer 3 · 2013-02-11T10:20:55.127

4

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'));

edited Feb 11 '13 at 10:20

answered Feb 11 '13 at 04:54

Jai

74,255
12
74
103

Side note: That's not what `` is for, although it may look spiffy. – phihag Feb 11 '13 at 10:09

score 4 · Answer 4 · answered Feb 11 '13 at 04:56

4

Try this:

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

answered Feb 11 '13 at 04:56

Tepken Vannkorn

9,648
14
61
86

bobthecow · Answer 5 · 2013-02-11T17:33:49.517

4

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');
});

edited Feb 11 '13 at 17:33

answered Feb 11 '13 at 04:59

bobthecow

5,047
25
27

score -1 · Answer 6 · answered Feb 11 '13 at 04:50

-1

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

answered Feb 11 '13 at 04:50

mika

1,411
1
12
23

This only updates the attribute, but does not spew it out as the text of the span. – Ravi Y Feb 11 '13 at 04:57
then do this: $("#wmenu span").text("Your Update here"); – mika Feb 11 '13 at 05:02
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. – Ravi Y Feb 11 '13 at 05:04
And if you have several spans, you may also be more specific like $("#wmenu span:first").text("Your Update here"); – mika Feb 11 '13 at 05:04

Modifying innerHTML from 3rd Party Script

6 Answers6