如何使用Javascript输出带有可变插值的多行HTML？

我想输出的每个函数运行时间如下：如何使用Javascript输出带有可变插值的多行HTML？

<object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
<param name="allowfullscreen" value="true" /> 
<param name="flashvars" value='config={"playlist":["poster_location", {"url": "clip_location","autoPlay":false,"autoBuffering":true}]}' /> 
<img src="poster_location" width="500" height="500" alt="Poster Image" title="No video playback capabilities." /> 
</object>

，我想插代码的某些部分在JavaScript中的变量（改变视频/海报等）。

我意识到这可以通过使用document.getElementById针对每个需要更改的部分并以此方式进行更改来完成，但出于各种原因，我需要在每次运行该功能时删除并重新构建整个元素。

那么有没有一种很好的方式来输出HTML使用JavaScript的方式类似于PHP的回声？

我也使用jQuery，如果有帮助。

来源

2010-12-01 Dewgong

当前最热门的jQuery方法是jQuery Template plugin。现在的问题是，你是否应该在客户端进行这种DOM操作？只有你可以做出这个决定。但是，如果这是你需要做的，模板插件是方便的。详情请参阅John Resig's writeup。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title></title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script> 
    <script id='summaryTmpl' type="text/x-jquery-tmpl"> 
      <li><h1>${Name}</h1> 
      <object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" value='config={"playlist":["${PosterLocation}", {"url": "${Location}","autoPlay":false,"autoBuffering":true}]}' /> 
        <img src="poster_location" width="500" height="500" alt="Poster Image" title="No video playback capabilities." /> 
      </object> 

    </script> 
    <script type="text/javascript"> 
      (function($){ 
      var movies = [ { 'Name':'die hard', 'Location':'http://someurl.com/vid.mpg', 'PosterLocation':'http://whereismymovieposter.net' }, { 'Name':'long kiss goodnight', 'Location':'http://whereisit.com'} ]; 
      $(function(){ 
         $("#summaryTmpl").tmpl(movies).appendTo("#moviesList"); 
       }); 
      })(jQuery); 
    </script> 
</head> 
<body> 
     <ul id="moviesList"></ul> 
</body> 
</html>

来源

2010-12-01 19:41:49 huntar

谢谢，检查出来。适合我的情况！ – Dewgong 2010-12-01 20:02:52

可以在JavaScript中使用多个字符串，像这样：

var str = "Blah blah blah \ 
    note the backslash that escapes the end of line";

或者你可以简单地关闭串并重新打开它的下一行：

var str = "Blah blah blah " 
    +"and this way you don't get 'Empty Text Node' all over your DOM";

来源

2010-12-01 19:17:27

有一个（V）的sprintf的jQuery插件在这里：http://plugins.jquery.com/project/printf

它给你像sprintf（）功能。你会建立一个字符串，像这样：

code = '<object id="%s" width="%d" height="%d" type="application/x-shockwave-flash" data="%s">' 
//etc - yours is a bit long.

然后，来生成唯一的版本...

custom = $.sprintf(code, myId, myWidth, myHeight, myDataURL);

现在custom有自己的价值观插了进去。根据您插入“模板”字符串的字段数量，可以使其非常可定制。代码完成后，将其插入到您的文档中。

来源

2010-12-01 19:30:24

这看起来很理想，但我想知道它比Kolink的解决方案慢多少？ – Dewgong 2010-12-01 19:39:05

如何使用Javascript输出带有可变插值的多行HTML？

回答

相关问题