Question

如果你有一个更好的头衔，改变它，但我真的不知道写了什么......

我想知道是否有办法改变这种丑陋的事情：

jQuery('<div id="loginScreen">' +
            '<h3>Login</h3>' +
            '<div id="logsContainer">' +
            '<div class="leftLoginBox">Login</div>' +
            '<div class="rightLoginBox"><input name="login" class="inputForm" type="text" value="Seby"></div>' +
            '<div class="leftLoginBox">Password</div>' +
            '<div class="rightLoginBox"><input name="password" class="inputForm" type="password" value="123456789"></div>' +
            '<div style="clear: both;"></div>' +
            '</div>' +
            '<div class="checkbox"><input id="check1" type="checkbox" name="check" value="check1"><label for="check1">Remember me </label></div>' +
            '<div id="tryLogUser" class="buttonLogin">Login</div>' +
            '<div class="buttonLogin">Register</div>' +
            '<div class="textAddLogin">Forgot login or password?</div>' +
            '').appendTo('body');

纯HTML中的

，包含语法颜色，缩进和所有内容。 javascript文件中的某种分隔符可以带来一些魔力。我知道我曾经用PHP看过那种东西，但它是服务器端。

我没有太多的希望，但无论如何都要问！

编辑：我忘了说我想在.js文件中执行此操作，而不是.html文件。（实际上，在.ts文件中，但如果你不知道TypeScript，它就像.js。）

编辑2：我的情况很特别，我正在构建一个视频游戏，我无法动态加载太多文件。我更多的是寻找技巧或解决方法。看起来这是不可能的，除了使用隐藏的div来计算片段，但它并不是真的更好......

Answer 1

没有神奇的方法可以将纯HTML写入javascript变量。它必须遵循javascript字符串的规则，这需要你现在正在做的事情类型。

这里有三个主要选择：

对于大量的HTML，您可以创建一个单独的模板文件并将其动态加载到JS变量中，然后您可以根据需要使用HTML。
对于较小的HTML片段，您可以将HTML包含在主HTML文件的隐藏部分中，只需使用其中的HTML对象，或者使用JS从中获取.innerHTML。
您可以像以前一样将HTML编码为JS字符串。

对于许多不同的HTML代码段，您可以将它们放入单个模板文件中，加载该模板文件，将其加载到HTML片段中，然后使用DOM操作根据需要获取任何单个代码段。

Answer 2

var mytext = '<div id="loginScreen">' +
            '<h3>Login</h3>' +
            '<div id="logsContainer">' +
            '<div class="leftLoginBox">Login</div>' +
            '<div class="rightLoginBox"><input name="login" class="inputForm" type="text" value="Seby"></div>' +
            '<div class="leftLoginBox">Password</div>' +
            '<div class="rightLoginBox"><input name="password" class="inputForm" type="password" value="123456789"></div>' +
            '<div style="clear: both;"></div>' +
            '</div>' +
            '<div class="checkbox"><input id="check1" type="checkbox" name="check" value="check1"><label for="check1">Remember me </label></div>' +
            '<div id="tryLogUser" class="buttonLogin">Login</div>' +
            '<div class="buttonLogin">Register</div>' +
            '<div class="textAddLogin">Forgot login or password?</div>';

$('.somedivclass').append(mytext);

你可以简单地使用jQuery中的append（）函数

Answer 3

您想要做的是DOM

修改

如果您需要预加载大量数据和文件，请使用像preloadjs http://www.createjs.com/#!/PreloadJS这样的库

在Havascript var中将Html写为Html而不是字符串

3 个答案: