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

发布于 2024-10-05 02:30:33 字数 866 浏览 7 评论 0原文

我试图在每次运行函数时输出以下内容：

<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，如果有帮助的话。

原文

I'm trying to output the following each time a function is run:

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

and I'd like to interpolate javascript variables within certain parts of the code (to change the video/poster etc).

I realise this can be done by targeting each part that needs to be changed using document.getElementById and changing it that way, but, for various reasons, I need to remove and re-build the whole element each time the function is run.

So is there a good way to output html using javascript in a fashion similar to php's echo?

I'm also using jQuery, if that helps.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌若浮生 2024-10-12 02:30:33

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

You can use multiline strings in JavaScript like so:

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

Alternatively you can simply close the string and reopen it on the next line:

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

回复收藏 0 原文

心碎的声音 2024-10-12 02:30:33

目前最热门的 jQuery 方法是 jQuery 模板插件。现在的问题是，您是否应该在客户端进行这种 DOM 操作？这是只有您才能做出的决定。但是，如果这是您需要做的，模板插件会很方便。有关详细信息，请参阅 John Resig 的文章。

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

The hotest jQuery approach currently is the jQuery Template plugin. Now the question is, should you be doing this kind of DOM manipulation on the client side at all? That is a decision only you can make. However if it is what you need to do, the Template Plugin is handy. For the particulars see 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>

回复收藏 0 原文

故事和酒 2024-10-12 02:30:33

这里有一个 (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 已将您的值插入其中。根据您插入“模板”字符串中的字段数量，您可以使其非常可定制。代码完成后，将其插入到您的文档中。

There's a (v)sprintf jQuery plugin here: http://plugins.jquery.com/project/printf

It gives you sprintf() like functionality. You'd set up a string, like this:

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

Then, to generate your unique version...

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

Now custom has your values inserted into it. Depending on how many fields you insert into the "template" string, you can make it very customizable. When the code is done, insert it into your document.

回复收藏 0 原文

~没有更多了~