Question

这个问题是关于为视频播放器编写HTML代码的Javascript。我认为有一些更快的方法（document.createElement，Jquery等）。请告诉一些更好，更快的方法。提前致谢

    function createPlayer(videoSource){
            document.writeln("<div id=\"player\">");
            document.writeln("<object width=\"489\" height=\"414\" >");
            document.writeln("<param name=\"player\" value=\"bin-    debug/FlexPlayer.swf\">");
           //etc
            document.writeln("</embed>");
            document.writeln("</object>");
            document.writeln("</div>");               
    }

Answer 1

与document.createElement一起生活将是最快的。但是，如果你的标记很大，那么这种方式就会成为维护的噩梦。此外，要“想象”事物并不容易。

在这些情况下，您可能希望与客户端模板解决方案（例如jQuery模板或下划线模板或John Resig的微模板）进行权衡。

另一个性能提升是构建整个标记并在最后添加到DOM（首先添加子项，然后将父项添加到DOM）。

Answer 2

你可以试试这个：

function createPlayer(videosource){
    var div = document.createElement('div');

    div.innerHTML = '<object width=\"489\" height=\"414\" >' + 
        '.......'
    document.body.appendChild(div);
}

Answer 3

我知道有一个jQuery函数可以让你创建一个模板HTML片段，你可以在以后只用1或2行代码重复使用，添加变量并将其附加到页面。

为此你需要jQuery（最新应该没问题）http://jquery.com/

tmpl函数的文档位于：http://api.jquery.com/jquery.tmpl/

有关如何使用它的详细信息，你最好阅读jQuery文档的一个例子，我自己没有使用它，所以不能给你一个很好的例子，但文档网站上有很多东西。< / p>

希望这有帮助

编辑：实现该功能的资源消耗较少的方法是，而不是将每一行依次写入文档，只需将它们全部附加到字符串中，然后在完成时写入一次。

例如：

function createPlayer(videoSource){
            var html="<div id=\"player\">";
            html+="<object width=\"489\" height=\"414\" >";

            //etc            
            document.writeln(html);               
    }

这更快，因为在文档中写一行比使用在内存中附加字符串更多的资源。对于MAXIMUM SPEED，您甚至可以在函数外部声明html var，并将其设置为标记为一个长字符串，然后将其写入 - 即

var html;
 function createPlayer(videoSource){
                html="<div id=\"player\"><object width=\"489\" height=\"414\" >"; //and so forth           

                document.writeln(html);               
        }

如果你可以证明更大的下载量，我会尽可能地使用jQuery解决方案，它通常更容易管理 - 我过去做过很多脚本生成的HTML，很快就会变得很难维护。祝你好运

Answer 4

对于一般操作和添加HTML，我建议使用jQuery。它使这个过程更容易，更快。

您可以在此处找到更多相关信息：

jQuery操作方法 - http://api.jquery.com/category/manipulation/
jQuery教程 - http://docs.jquery.com/Tutorials

Javascript更好的HTML编写方法

4 个答案: