Question

我有一个我需要创建的javascript变量：

var HTMLContent = '<div class="className">HTML Content</div>';

如何以更易于阅读的格式对其进行格式化，因为我想要创建多行HTML。

e.g。

var HTMLContent = '
<div class="className">
  HTML Content
</div>
';

这样的事情可能吗？

如果我可以通过网址导入，那也很好var HTMLContent ='http://domain.com/page.html';

Answer 1

 var longStr = "You can split\
 the string onto multiple lines\
 like so";

使用HTML的示例如下：

var longStr = 
    '<div class="className">\
        HTML Content\
    </div>';

要加载外部HTML，请查看jQuery的load method：

$('#result').load('ajax/test.html');

Answer 2

在页面标记中，添加隐藏的模板div，例如：

<div id="contentTemplate" style="display: none;">
    <div class="className">
        HTML_CONTENT
    </div>
</div>

...然后在您的JavaScript中，您可以执行以下操作：

var newContent = 'The content for the new element';
var templateContent = document.getElementById("contentTemplate").innerHTML;
var htmlContent = templateContent.replace("HTML_CONTENT", newContent);

您还可以使用AJAX request从网址中提取newContent的值，以使您的动态内容加载正常。但是，如果您计划这样做，那么我建议您使用类似jQuery的框架进行调查，这可以大大简化此过程。

Answer 3

你也可以使用反引号

＆＃13;

function myFunc() {
var HTMLContent =`
<div class="className">
    <div>HTML Content</div>
</div>
`;

document.getElementById('demo').innerHTML = (HTMLContent);

}
myFunc()

＆＃13;

<div id="demo"></div>

＆＃13;

Answer 4

您可以使用转义字符：

var HTMLContent = '<div class="className">\n\tHTML Content\n</div>';

我可能误解了这个问题，你希望javascript更具可读性，而不是存储在变量中的html？

Answer 5

var HTMLContent = 
    '<div class="className">' +
    'HTML Content' +
    '</div>';

Answer 6

您可以执行以下操作：

 var HTMLContent = '<div class="ClassName">' + 
   'HTML Content' +
    '</div>';

Answer 7

javascript中允许使用多行字符串：http://www.componentart.com/community/blogs/jovan/archive/2007/10/17/multiline-strings-in-javascript.aspx

要从服务器获取html，最简单的方法是使用jQuery：

$.get('http://domain.com/page.html', function(theHTML){
    yourVariable = theHTML;
});

Answer 8

var HTMLContent = "" +
"<div class=\"className\">\n" +
"    HTML Content\n" +
"</div>\n" +
"";

这样，如果有人要查看源代码，那么将它写得很漂亮的脚本和它编写的代码也会非常相似。

在Javascript中的变量中创建HTML内容

8 个答案: