js 替换 innerHTML 仅适用于没有 jQuery答案

【问题标题】：js replace innerHTML only works without jQueryjs 替换 innerHTML 仅适用于没有 jQuery
【发布时间】：2012-10-20 22:26:02
【问题描述】：

我认为：

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

相当于这样：

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

但事实并非如此。两者中只有后者有效 =( 我希望将代码现代化并缩短一点。

newContent 目前包含此字符串，但将包含任意数量的 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>

这是我获取那个字符串的方法，不知道它是否改变了什么......

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) {

【问题讨论】：

newContent 包含什么？是完全不替换还是只替换了一部分？
他们应该以同样的方式工作。 newContent 包含什么？是字符串还是对象？
我不想问这个问题，但你确定你包含了 jQuery 吗？
他们应该是一样的... .html() 只是做一些检查。你可以在这里阅读stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml。 “只有在没有 jQuery 的情况下才能工作”是什么意思？？
看看这个fiddle，和你的有什么不同？

标签： javascript jquery html

【解决方案1】：

他们应该以同样的方式行事。

拉小提琴here

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

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

jQuery Docs

【讨论】：

我知道他们应该这样做，但出于某种原因... =/
@MattiasSvensson 你是如何存储字符串的？请参阅：jsfiddle.net/wpHTB/1 为了方便起见，我刚刚将它放在一个 div 中...
用老式的方式做这件事很好，我只是想也许有人能发现我的一个明显错误，但既然你们都同意他们应该做同样的事情，我想可能还有另一个细节我的代码使 jQuery 替代方案有点混乱。这些“检查”之一也许......
我认为我的问题是我试图立即使用 ajax 调用中的变量，因为我没有将 asynch 设置为 false，所以该变量可能不存在/还有它的内容.