Question

我看到很多人在这里给出答案，要求你通过Javascript使用“document.createElement”和其他方法在html页面中创建一个新元素。我可以在一定程度上理解这一点，但这是否真的有必要？

例如，当我构建自己的非专业页面时，它们总是需要用户输入。在输入完成时，html文件中的某些位置会根据用户输入的内容显示结果。我事先在html文件中制作了所有标签，所以我只需要将javascript结果应用到html中的特定id。然而，正如已经提到的，显然很多人喜欢在Javascript本身中创建元素并通过document.createElement或使用var group = $('<div class="group"></div>');等变量将其发送到html。我是一个坏习惯，这个真的是最好的方法吗？

假设我需要根据用户输入的内容制作一个显示信息的列表。我所做的就是准备好列表并在html中完成，没有显示，只有在时间准备好后才能显示，而不是像以下那样编码：

var list = $('<ul class="legend"></ul>');

var listItem = $('<li><span class="example' + i + '"></span>' + this
+ '</li>').appendTo(list); //in a loop, etc.

我可以理解有时候必须从js中创建东西，但我个人更喜欢在html上设置和完成所有等待使用的东西，我想知道这是不是坏事。提前感谢您的答案。

编辑：非常感谢您的回答，我真的很感激。我想在这里再说一个例子，虽然我认为这个想法本身已经很清楚了。我理解需要根据情况动态更新页面内容，但我真正想到的是：在某种情况下，表/列表/任何内容将以预先建立的方式显示，不会添加任何内容或减去，有没有必要使用上述方法？例如，我发现在html中输入它会容易得多：

<input type='button' onclick='display(2)' value='Click me'>

比js中的更多：

var inputElement = document.createElement('input');
inputElement.type = 'button';
inputElement.value = 'Click me';
inputElement.addEventListener('click', function(){
    display(2);
});

document.body.appendChild(inputElement);

这两个都做了几乎相同的事情，除了第一个已经插入到html中，而第二个是通过js创建的。这里要问的主要问题是：在一切已经预先确定并且用户无法改变页面显示方式的情况下，是否有任何原因我应该做什么上面例子中的js方法，而不是html方法？

Answer 1

对于动态Web应用程序，大多数情况下，不能真正拥有页面中已包含的所有内容，例如，通过AJAX请求的内容列表。

事实上，<ul>标签可以预先手动放入，但内部的<li>呢？如果您不总是想要列表，并且您可以显示多种类型的数据，该怎么办？动态注入元素使页面变得灵活。

使用大型框架，您甚至可以拥有一个空体，其内容可以随时随地从多个HTML模板中创建。

我的建议是，将所有元素设置好并准备好用于小页面可能没什么问题，但是对于更有活力的东西，你应该使用a framework来帮助你处理内容。

Answer 2

我个人尝试使用style =“display：none”来构建html模板（由js构建的样式是噩梦），以防止闪烁（在jQuery启动之前）。

然后在文档就绪时，我将这些模板保存到变量中（从DOM中删除并删除不再需要的隐藏样式）：

var $element = $('element').detach().show();

现在可以将$element用于任何需要（在循环中克隆它，或者只在需要时直接操作）。

注意：制作没有任何属性（如普通<li>）的单一格式的单个元素不会那么明显。

是否更好地创建元素或只是在html上准备好它们？

2 个答案: