Javascript-更好的书写方式HTML

这个问题是关于Javascript写视频播放器的HTML代码。我认为有一些更快的方法（document.createElement，Jquery等）。请告诉一些更好和更快的方法来执行此过程。在此先感谢Javascript-更好的书写方式HTML

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>");    
    }

来源

2011-07-29 George

不止一次写入DOM是一件坏事。你应该建立一个字符串并将其写入页面。 – epascarello

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

为此，您需要的jQuery（最新的应该是罚款）http://jquery.com/

文档的TMPL功能在这里：http://api.jquery.com/jquery.tmpl/

有关如何使用它的详细信息，你最好阅读为例jQuery文档，我没有使用它自己，所以不能给你写一个很好的例子，但是文档站点上有很棒的东西。

希望这有助于

编辑：一个不太资源密集型办法acheive该功能将，而不是写在每行依次文件，只需将它们全部追加到一个字符串，然后写一次当你完成。

如：

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

      //etc    
      document.writeln(html);    
    }

这是更快，因为写一行到文档中使用更多的资源不仅仅是附加内存中的字符串。为了获得最大的速度，你甚至可以申报HTML变种的功能之外，只是将其设置为标记为一个长字符串，然后把它写 - 即

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

       document.writeln(html);    
     }

如果你能证明较大的下载大小我会去如果可能的话，对于jQuery解决方案来说，它通常更易于管理 - 过去我已经完成了大量脚本生成的HTML，并且很快就会变得很难维护。祝你好运

来源

2011-07-29 23:28:28 jammypeach

你可以试试这个：

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

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

来源

2011-07-29 23:25:55 qwertymk

但是如何测试这个工作是否更快。时间戳？ – George

如果你的意思是如何查看它是否执行得更快，你可以在firefox上使用console.time和console.timeEnd函数来实现firebug。放置一个console.time（'foo'）;在开始时，然后是一个console.timeEnd（'foo'）;在函数结束时，在firefox中加载页面，并留意控制台。更多细节在这里：http://getfirebug.com/logging – jammypeach

投票。非常有帮助，谢谢。 – George

对于一般的操作和添加的HTML我推荐jQuery。它使过程变得更加简单快捷。

，你会发现更多的相关信息，在这里：

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

来源

2011-07-29 23:32:04 RustyFluff

融入本土与document.createElement将是最快的。但是，如果您的标记很大，那么这样做会使其成为维护噩梦。而且，“可视化”事情并不容易。

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

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

来源

2011-07-29 23:33:07 Mrchief

Javascript-更好的书写方式HTML

回答

相关问题