急求innerHTML的用法

Question

RT，我需要在innerHTML中输出一堆html代码，请问怎么做最省事直观？document.getElementById('head').innerHTML=xxx这个innerHTML的代码有如下一大堆~<div class="tip">
       <div id="marquee">  
<div><a href="#">文明游戏，礼貌待人</a></div>
<div>不忘收获时间，乐于帮助好友</div>
<div>培养英雄部队，帮你东征西闯</div>
<div>体力、时间要算好，经济、战斗两不误</div>
</div> 
    </div>
 
<ul class="ul">
        <li class="my">
            <a id="defaultpage" class="png" href="#" onclick="javascript:showflash()">
            </a>
        </li>
        <li class="linvite">
            <a class="my" id="renreninvite" href="#" onclick="javascript:invite()">
</a>        
</li>
        <li class="gold">
            <a class="my" href="#"  onclick="alert(\'对不起，此功能尚未开放，敬请期待！\')"></a>    
       
</li>
        <li class="forum">
            <a class="my" href="http://sobar.soso.com/b/3007483_770" target="_blank">            
</a>       
</li>  
        <li class="page">
            <a class="my" href="#" onclick="alert(\'对不起，此功能尚未开放，敬请期待！\')">
</a>
        </li>
        <li class="faq">
            <a class="png" href="#" onclick="showfaq()">
</a>
        </li>
    </ul>';

document.getElementById('foot').innerHTML='
<div  class="show">
 <table height="100%" align="center"><tbody><tr><td valign="middle">此应用由<span style="font-size:16px; font-family:'黑体';">珠海乐趣科技有限公司</span>提供,若您在游戏过程中遇到问题,请加QQ <span style='color:blue'>2235309262</span>,我们的客服会尽快解答您的问题.</td></tr></tbody></table>
</div>

<div class="sys_notice">
<table height="100%" align="center"><tbody><tr><td valign="middle"><span style="color:#ff3c00;">健康忠告：</span>抵制不良游戏，拒绝盗版游戏。注意自我保护，预防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</td></tr></tbody></table>
</div>

<div  class="showtalk">
 <table height="100%" align="center"><tbody><tr><td valign="middle" style="font-size:16px;">玩家交流群: <span style='color:blue'>20435252</span><a href="http://qun.qq.com/#jointhegroup/gid/20435252" target="_blank"><img border="0" title="加入此群" alt="加入此群" src="http://app23273.qzoneapp.com/tengxunapp/rr_png/gp.do.png" /></a><span style=\'color:blue\'>152599974</span><a href="http://qun.qq.com/#jointhegroup/gid/152599974" target="_blank"><img border="0" title="加入此群" alt="加入此群" src="http://app23273.qzoneapp.com/tengxunapp/rr_png/gp.do.png" /></a></td></tr></tbody></table>
</div>

<div class="copyright">
</div>

<div class="showweibo">
<table height="100%" align="left"><tbody><tr><td valign="middle"><span style="color:#6600FF">厌倦乏味的日子？赶快加入我们官方微博，交友、挑战、夺宝...让你的生活快乐无极限！</span><a href="http://t.qq.com/games_magickingdom?preview" target="_blank" style="text-decoration:none; color:#CC0033">点击进入</a></td></tr></tbody></table>
</div>
<div class="shareToTencent">
<div><a style="background:url(http://app23273.qzoneapp.com/tengxunapp/rr_png/weibo.png) no-repeat left center; padding-left:25px" href="http://t.qq.com/games_magickingdom?preview" target="_blank">收听魔幻王国</a>
</div>

<div><a style="background:url(http://app23273.qzoneapp.com/tengxunapp/rr_png/qz_logo.png) no-repeat left center;" title="分享到QQ空间" onclick="shareToPy(\'qzone\'); return false;" href="javascript:void(0);">分享到QQ空间</a>
</div>

<div><a style="background:url(http://app23273.qzoneapp.com/tengxunapp/rr_png/xy-icon.png) no-repeat left center;" title="分享到腾讯朋友" onclick="shareToPy(\'qzone\'); return false;" href="javascript:void(0);">分享到腾讯朋友</a>
</div>

<div><a href="javascript:void(0);" onclick="createShortcut(\'http://app.pengyou.com/appframe.php?appid=23273\');" title="创建桌面快捷方式" style="background:url(http://app23273.qzoneapp.com/tengxunapp/rr_png/k.png) no-repeat left center">创建桌面快捷方式</a>
</div>

<div><a onclick="addfavorite(\'http://app.pengyou.com/appframe.php?appid=23273\',\'魔幻王国\')" href="javascript:void(0);" title="收藏游戏" style="background:url(http://app23273.qzoneapp.com/tengxunapp/rr_png/t.png) no-repeat left center">收藏游戏</a>
</div>
</div>

Answer 1

直接=一个字符串
双引号可以替换成转义的\"想清晰而且内容不太多的话，完全可以考虑使用appendChild方法。

Answer 2

你的字符串里面不能换行。
反正HTML也不认，换行干啥。
太长了可以+=的方式拼接，如果是后台传过来的，可以用stringbuilder

Answer 3

js 字符串值也是可以换行的，得用一点技巧：
var someString = 'this is the first line of the string' +
                   'this is the second line of the string' +
                   //......此处省略一万行
                   'this is the end line of the string';
document.getElementById('someContainer').innerHTML = someString;

Answer 4

对,跟楼上的一样,不过也可以先用一个数组放后,最后innerHTML
字符串大了,没有操作数组快
var oArray = new Array();
oArray.push('aaaa');
document.getElementById('someContainer').innerHTML = oArray.join(' ');

Answer 5

这么说吧 想把这样一大段html代码 用innerHTML方法赋予dom 不现实 而且效率低
楼主不如先说说自己的需求 为啥会让楼主有如此需求 

Answer 6

需求就是，我要让用户最先看见我一个iframe里面的flash，现在测试到很多用户在flash加载前就关闭了页面，而正常在页面写好html的话，用FF测试结果会先GET页面上很多很多的图片才会加载flash，（当然这是针对网速不好的用户而言），所以我现在想把页面其他部分先设为空，等flash开始加载了，用JS动态加载页面，所以才会在innerHTML中输出一大堆HTML代码，就是这样！
如果您碰到这样的问题该如何解决？
如果用JS输出一大堆HTML的话，代码基本变得不可维护，所以也很郁闷

Answer 7

http://www.tizag.com/javascriptT/javascript-innerHTML.php   这里面讲了一些它的用法 不知道对你有没有用

Answer 8

把它写在另一个html文件里，你用js请求它，得到文件内容，然后innerHtml进去。。

Answer 9

我想过用AJAX发送请求到一个一个html，然后document.write返回值，但是感觉还是不是很好。毕竟针对不同浏览器js响应速度不一样，怕出问题

Answer 10

可否给那坨代码先display：none，然后等flash加载时在js动态控制那坨代码的display：block呢？

Answer 11

你隐藏没有用啊，图片什么的照样会加载。
现在主要想优化，让flash最先加载。一个先后顺序的问题，让图片什么的排在后面加载

Answer 12

只是加载图片吗？那这样行不行，把图片路径和指定元素的id以名值对配置到xml文件里，然后当flash加载完后解析xml依次读取id选取指定元素，添上图片链接呢？我是新手考虑情况不够全面，见谅

Answer 13

如果你一定要用innerHTML的话，那么先搞清楚赋值表达式右边数据的来源。1.如果数据来源是类似jsp/php直接输出在页面上，再拼凑成js代码的话，那么这么做真是找罪受，你得在jsp/php输出之前将字符串中的所有特殊字符进行转义，以便最终能够输出一个可以直接使用的js字符串字面量。2.如果数据来源是类似ajax方式取得，并保存在一个js变量之中的话，那么还算简单，两个变量直接传值就能搞定。ps:情况1，像前面13楼说的那样，先直接输出display:none的HTML，之后根据情况再来显示，对于图片加载的问题，你可以试试借鉴现在的图片延迟加载解决方案。

Answer 14

把需要加载的html保存到一个textarea中，在需要加载时把textarea的value插入指定位置。不知道这样可不可以，这是在许多页面分屏加载时用到的技术