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

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

javascript jquery variables

如何使用Javascript输出带变量插值的多行HTML？,javascript,jquery,variables,interpolation,Javascript,Jquery,Variables,Interpolation,每次运行函数时，我都会尝试输出以下内容： <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.

每次运行函数时，我都会尝试输出以下内容：

<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

针对需要更改的每个部分并以这种方式进行更改来实现，但是，由于各种原因，每次运行函数时，我都需要删除并重新构建整个元素

那么，有没有一种很好的方法可以使用javascript以类似于php的echo的方式输出html呢

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

您可以在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";

这里有一个（v）sprintf jQuery插件：

它提供了类似sprintf（）的功能。您可以设置一个字符串，如下所示：

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

现在，

custom

将您的值插入其中。根据您在“模板”字符串中插入的字段数量，您可以使其非常可自定义。完成代码后，将其插入文档。

当前最热门的jQuery方法是。现在的问题是，您是否应该在客户端执行这种DOM操作？这是一个只有你才能做出的决定。然而，如果这是你需要做的，模板插件是方便的。详情请参阅


${Name}
（函数（$）{
var movies=[{'Name'：'die hard'，'Location'：'http://someurl.com/vid.mpg“，“PosterLocation”：”http://whereismymovieposter.net{'Name'：'long kiss goodnight'，'Location'：'http://whereisit.com'} ];
$（函数（）{
$（“#summaryTmpl”）.tmpl（电影）。附件（“#电影列表”）；
});
})（jQuery）；

这看起来很理想，但我想知道它比Kolink的解决方案慢了多少？谢谢，请查看。对我的案子很有效！

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

<!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>