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

Question

我有一个我需要创建的javascript变量,如下所示:

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

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

例如

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

有可能吗？

如果我可以通过URL导入,例如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的加载方法:

$('#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请求newContent从URL中提取值以使您的动态内容加载工作.但是,如果您计划这样做,那么我建议您使用像jQuery这样的框架进行调查,这可以大大简化此过程.

Answer 3

您还可以使用反引号

function myFunc() {
var HTMLContent =`
<div class="className">
    <div>HTML Content</div>
</div>
`;

document.getElementById('demo').innerHTML = (HTMLContent);

}
myFunc()

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

Answer 4

您可以使用转义字符：

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

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