获取实际输出 HTML 的函数答案

【问题标题】：Getting a function to actually output HTML获取实际输出 HTML 的函数
【发布时间】：2011-08-18 19:10:37
【问题描述】：

运行一些动态构建图像数组的 JavaScript。

这是简化版：

    var imgArray = new Array(
        "mainBG.jpg",
        "mainBG2.jpg",    
        "mainBG3.jpg",
        "mainBG4.jpg"
    );

    var img = Math.floor(Math.random()*imgArray.length);

    jQuery(document).ready(function() {
        $("body").ezBgResize({img : "/lib/img/bkgr/" + imgArray[img]});
    });

    function generateThumbs(){
         var t = document.getElementById("thumbs");
         var ret = '';

        for(i=0;i<imgArray.length;i++){

            var image = imgArray[i];

            ret += '<a href="#" onclick="changeBig(\''+image+'\')" /><img src="/lib/img/bkgr/'+image+'" alt="thumbnail image" width="77" height="44" /></a>';
        }      

        return ret;        
    };

    function changeBig(bg){
        $("body").ezBgResize({img : "/lib/img/bkgr/" + bg});
    }

然后在页面中，它被简单地写出来：

 <div class="scrollable">   
    <div class="items" id="thumbs">
        <script>document.write(generateThumbs());</script>
    </div>
</div>

问题是，当我查看源代码时，它从不输出实际的 HTML。源代码只是显示了那条线。有没有办法让该函数实际将 HTML 输出到页面中 - 部分用于 SEO，但也有一些 jQuery 可以与之交互 ?

【问题讨论】：

网络爬虫很少（如果有的话）执行 Javascript。 SEO 对此毫无用处，因为爬虫永远不会看到您的 JS 生成的内容。话虽如此，请改用document.getElementById('thumbs').innerHTML = generateThumbs()。
"The source just shows that line" 如果要直接显示 HTML，则需要在服务器端添加它，然后再部署到客户端。
您的 t 变量是多余的。
源代码只是显示服务器发送的原始代码，在我知道的所有浏览器中，当您使用Javascript修改DOM时，源代码不会改变。您是否尝试过使用 Chrome/Safari 中的开发者菜单或 Firefox 中的 Firebug？
只是指出 document.getElementById('thumbs'); == $('#thumbs');请仅使用 jQuery，以便您更好地理解代码。

标签： javascript jquery html seo

【解决方案1】：

当您查看源代码时，您所看到的只是从网络服务器返回到浏览器的代码，而 javascript 对 dom 没有任何修改。要在原始源代码中包含代码，您需要在服务器端生成它。

要查看带有 javascript 修改的生成源，您可以使用 firefox 中的 firebug 或 Chrome/Safari/IE9 中的内置开发人员工具。

【讨论】：

【解决方案2】：

这样就可以了

$(function(){
    $("#thumbs").html(generateThumbs());
});

【讨论】：

【解决方案3】：

不要在 HTML 页面的上下文中调用 document.write。你应该这样做：

 <script type="text/javascript" language="javascript">
     document.getElementById('thumbs').innerHTML = generateThumbs();
 </script>

【讨论】：

虽然是真的，但这与问题无关。
好点。如果他希望最初呈现 HTML，那么他不能使用 javascript，需要使用某种服务器资源。

【解决方案4】：

试试：

$('#thumbs').html(generateThumbs());

【讨论】：