js 替换 innerHTML 仅适用于没有 jQuery
Posted
技术标签:
【中文标题】js 替换 innerHTML 仅适用于没有 jQuery【英文标题】：js replace innerHTML only works without 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älligt avbrott, visar cachelagrat innehå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 ä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() 只是做一些检查。你可以在这里阅读***.com/questions/3563107/jquery-html-vs-innerhtml。 “只有在没有 jQuery 的情况下才能工作”是什么意思？？
看看这个fiddle，和你的有什么不同？
【参考方案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，所以该变量可能不存在/还有它的内容.以上是关于js 替换 innerHTML 仅适用于没有 jQuery的主要内容，如果未能解决你的问题，请参考以下文章