Question

我想知道将html放在javascript或html文件中是否更好。

例如让我的js文件有这个

$('<div>').addClass('test').append(
                        $('<p>').text('test1'),
                        $('<span>').text('test2'),
                        $('<span>').text('test3')
                      ).insertAfter( $('#test1') );

VS

我的html文件看起来像这样

<div id="#test1"></div>
<div class="test">
    <p>test1</p>
    <span>test2</span>
    <span>test3</span>
</div>

和js文件有：

$（ '试验'）表示（）;

Answer 1

高度主观，当然取决于背景。

在网页中，大部分内容都是已知的。没有理由不将内容放在HTML中并使用CSS（当真正需要时可能使用Javascript）进行样式化。

然而，在Web应用程序中，事情不如此众所周知。该文档更加动态，需要使用Javascript添加/删除元素。

BTW，你的两段代码做了两件不同的事情。在第一个示例中，您为class test提供了ID，在第二个示例中，您给它#test1 ID。这是无效的test1，应为selector。该ID的#test1为{{1}}，可能会引起一些混淆。

Answer 2

这对于直接网页来说可能没什么问题，但对于Web应用程序，你应该真正研究一个模板系统，例如mustache.js（https://github.com/janl/mustache.js）或{ {1}}（http://handlebarsjs.com/）。

这样，您可以将HTML保留在外部模板文件中，并使用Handlebars.js个对象和数组来填充数据。例如，小胡子模板可能如下所示：

Javascript

你会有一个看起来像这样的对象来填充它：

<div id="{{id}}"></div>
<div class="{{class}}">
    <p>{{name}}</p>
    <span>{{prop1}}</span>
    <span>{{prop2}}</span>
</div>

你可以将模板与这样的对象一起使用（在将模板加载到变量中之后）：

var obj = {
    id: "myID",
    class: "some classes",
    name: "Martin Brennan",
    prop1: "whatever",
    prop2: 22
}

就像Jeremy J Starcher所说，这是非常主观的，我建议你试试模板系统，看看你是否能看到在你的项目中使用它们的价值。

Answer 3

当然第二种选择更好更快。

如果您使用

$('<div>').addClass('test').append(
                        $('<p>').text('test1'),
                        $('<span>').text('test2'),
                        $('<span>').text('test3')
                      ).insertAfter( $('#test1') );

浏览器必须解析JavaScript。每次使用$()时，您都会创建一个对象，该对象具有许多您不使用的属性和方法（无用！）。当然浏览器也必须解析HTML。

但是如果你使用

<div id="#test1"></div>
<div class="test">
    <p>test1</p>
    <span>test2</span>
    <span>test3</span>
</div>

浏览器只需要解析HTML，而且速度要快得多。

Answer 4

使用第二种硬编码HTML方法的最大好处之一是它仍然会出现在禁用JavaScript的人身上。很难确切地确定有多少用户没有启用JS（因为大多数跟踪器都使用JS ..）但我听说最后一次猜测是大约5％的互联网用户。

故事的道德 - 让您的网站在没有JavaScript的情况下运行。然后，只有添加JavaScript才能使其看起来更漂亮/添加其他（非必要）功能。

Answer 5

简单的答案是静态内容应该使用普通标记创建，而Javascript应该用于动态内容。

此外，在许多情况下，您可以同时使用两者。您可以使用style="display:none"创建静态HTML标记，然后使用Javascript更改样式以使其显示并根据需要消失。

在Javascript中放置HTML的优点

5 个答案: