js replace innerHTML only works without jQuery

Question

I have thought that:

$('#slideshow_body').html(newContent);

would be equivalent to this:

document.getElementById('slideshow_body').innerHTML=newContent;

But it is not. Only the latter of the two works =( I was looking to modernize and shorten my code a bit.

newContent contains this string at the moment, but will hold any number of div:s:

      <script id="pauseTimesScript" type="text/javascript">
//<![CDATA[
  /* Define pauseTimes (array holding duration of each slide) */
  try {
                pauseTimes=null;
                pauseTimes=undefined;
                pauseTimes = new Array();       
                setPauseTimes();                
                /*alert('satte fÃ¶rst till null, deklarerade sedan om.');*/
  } catch(e) {
                pauseTimes = new Array();       
                setPauseTimes();                
                /*alert('deklarerade utan att fÃ¶rst sÃ¤tta null.');*/
  }
  function setPauseTimes() {      
        pauseTimes[1]=10000;                    
  }
  //]]>
  </script>
  <div id="avbrott" style="display: none;">
    Tillf&Atilde;&curren;lligt avbrott, visar cachelagrat inneh&Atilde;&yen;ll sedan
    2012-10-31 14:04:52
  </div>
  <div id="canvas" style="width:1072px;height:732px;">
    <div id="slide1" class="slide" style="z-index: 1; display: block;">
      <div id="slide_bg" style=
      "float:left;height:100%;width:100%;background-color:#ffffff;background-image:url('http://bglabs.evade.netdna-cdn.com/45875kli90/71.jpg');">
      <div style=
      "background-color:#ff0000;color:#ffffff;float:none;text-align:center;margin-top:30px;padding:10px;font-weight:bold;font-size:58pt;"
        id="preview_title">
          Nu &Atilde;&curren;r det jul igen!
        </div>
        <div style="clear:both;float:none;"></div>
        <p style=
        "color:#0f00de;margin:10px 10px 0 20px;font-style:italic;font-size:42pt;" id=
        "preview_data_6">Tja, snart i alla fall =)</p>
      </div>
    </div>
  </div>

Here is how I obtain that string, don't know if it changes anything...

function ajaxUpdate() {

    //Load current uri again asynchroneously
    var jqxhr = $.get(currentUri)
      .success(function(data) { newContent = data; })
      .error(function() { newContent = 'blank'; }); 

    //make sure we got the end token (</body>) so that our transmission wasn't interrupted in the middle of the request
    endtoken_test = newContent.search('</body>');

    //strip of everything before starttoken (<body>)
    newContent = newContent.substring(newContent.indexOf('<body id="slideshow_body">') +26 );

    //strip of everything before endtoken (</body>)
    newContent = newContent.slice(0, newContent.lastIndexOf("</body>"));

    if (endtoken_test != -1) {

what does `newContent` contain? does it not replace it at all or only replace part of it? — JamesHalsall, Oct 31 '12 at 12:50
They should work the same way. What does `newContent` contain? Is it string or some object? — WTK, Oct 31 '12 at 12:52
I hate to ask this, but have you made sure you included jQuery? — Elliot Bonneville, Oct 31 '12 at 12:54
they should be the same... .html() just make some more checks. You can read about that here http://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml. And what do you mean with "only works without jQuery"?? — thinklinux, Oct 31 '12 at 12:56
check this [fiddle](http://jsfiddle.net/cAUC5/), how is it different from yours? — Michal Klouda, Oct 31 '12 at 12:58

score 1 · Accepted Answer · answered Oct 31 '12 at 13:09

1

They should act in the same way.

Have a fiddle here

$(function(){
    $('#jq').click(function(){
        $('#content').html('jQuery');
    });

    $('#js').click(function(){
        document.getElementById('content').innerHTML = 'javascript';
    });
});

jQuery Docs

answered Oct 31 '12 at 13:09

Elliott

2,669
2
23
33

I know they should, but for some reason... =/ – Matt Welander Oct 31 '12 at 13:18
@MattiasSvensson how are you storing the string? see: http://jsfiddle.net/wpHTB/1/ I have just whacked it in a div for ease... – Elliott Oct 31 '12 at 13:26
It's fine doing it the old fashion way, I just thought maybe someone could spot an obvious error of mine, but since you all agree they should do the same thing, I guess there might be another detail in my code that messes the jQuery alternative up a bit. One of those "checks" perhaps... – Matt Welander Oct 31 '12 at 13:52
1

I think my problem was that I was trying to use the variable from the ajax call right away, since I did not have asynch set to false, the variable probably didn't exist/have its contents yet. – Matt Welander Nov 05 '12 at 15:31

js replace innerHTML only works without jQuery

1 Answers1