82

在实践中，使用 createElement 比使用 innerHTML 有什么优势？我之所以问，是因为我确信使用 innerHTML 在性能和代码可读性/可维护性方面更有效，但我的队友已经决定使用 createElement 作为编码方法。我只是想了解 createElement 如何更高效。

4

5 回答 5

83

createElement除了安全之外，使用而不是修改innerHTML（而不是仅仅扔掉已经存在的东西并替换它）还有几个优点，就像 Pekka 已经提到的：

追加元素时保留对 DOM 元素的现有引用

当您追加到（或以其他方式修改）innerHTML时，必须重新解析和重新创建该元素内的所有 DOM 节点。如果您保存了对节点的任何引用，它们将基本上是无用的，因为它们不再是出现的那些。

保留附加到任何 DOM 元素的事件处理程序

这实际上只是最后一个的特例（尽管很常见）。设置innerHTML不会自动将事件处理程序重新附加到它创建的新元素，因此您必须自己跟踪它们并手动添加它们。在某些情况下，事件委托可以消除这个问题。

在某些情况下可能更简单/更快

如果你做了很多添加，你肯定不想继续重置innerHTML，因为虽然简单的更改更快，但重复重新解析和创建元素会更慢。解决这个问题的方法是在字符串中构建 HTML，并innerHTML在完成后设置一次。根据具体情况，字符串操作可能比创建元素并附加它们要慢。

此外，字符串操作代码可能更复杂（特别是如果您希望它是安全的）。

这是我有时使用的一个功能，它使用起来更方便createElement。

function isArray(a) {
    return Object.prototype.toString.call(a) === "[object Array]";
}

function make(desc) {
    if (!isArray(desc)) {
        return make.call(this, Array.prototype.slice.call(arguments));
    }

    var name = desc[0];
    var attributes = desc[1];

    var el = document.createElement(name);

    var start = 1;
    if (typeof attributes === "object" && attributes !== null && !isArray(attributes)) {
        for (var attr in attributes) {
            el[attr] = attributes[attr];
        }
        start = 2;
    }

    for (var i = start; i < desc.length; i++) {
        if (isArray(desc[i])) {
            el.appendChild(make(desc[i]));
        }
        else {
            el.appendChild(document.createTextNode(desc[i]));
        }
    }

    return el;
}

如果你这样称呼它：

make(["p", "Here is a ", ["a", { href:"http://www.google.com/" }, "link"], "."]);

你会得到这个 HTML 的等价物：

<p>Here is a <a href="http://www.google.com/">link</a>.</p>
于 2010-06-01T02:38:35.990 回答
14

用户bobince在他对 jQuery 的批评中非常非常好地提出了一些缺点。

...另外，您可以通过说 $(''+message+'') 来创建一个 div，而不必乱用 document.createElement('div') 和文本节点。万岁！只是……等等。您没有逃脱该 HTML，并且可能刚刚创建了一个跨站点脚本安全漏洞，这次只是在客户端。在您花了很长时间清理 PHP 以在服务器端使用 htmlspecialchars 之后。多可惜。嗯，没有人真正关心正确性或安全性，不是吗？

jQuery 不能完全归咎于此。毕竟，innerHTML 属性已经存在多年，并且已经证明比 DOM 更受欢迎。但图书馆确实鼓励这种编码风格。

至于性能：InnerHTML 肯定会更慢，因为它需要被解析并在内部转换为 DOM 元素（可能使用createElement方法）。

根据@Pointy 提供的quirksmode 基准，InnerHTML在所有浏览器中都更快。

至于可读性和易用性，你会发现我在大多数项目中选择一周中innerHTML的createElement任何一天。但正如你所看到的，有很多观点代表createElement.

于 2010-06-01T00:33:13.903 回答
14

虽然innerHTML可能更快，但我不同意它在可读性或维护方面更好。将所有内容放在一个字符串中可能会更短，但更短的代码并不总是更易于维护。

当需要将动态 DOM 元素创建为加号时，字符串连接无法扩展，并且引号的开头和结尾变得难以跟踪。考虑这些例子：

结果元素是一个具有两个内部跨度的 div，其内容是动态的。第一个跨度内的一个类名（战士）也是动态的。

<div>
    <span class="person warrior">John Doe</span>
    <span class="time">30th May, 2010</span>
</div>

假设已经定义了以下变量：

var personClass = 'warrior';
var personName = 'John Doe';
var date = '30th May, 2010';

仅使用 innerHTML 并将所有内容混合成一个字符串，我们得到：

someElement.innerHTML = "<div><span class='person " + personClass + "'>" + personName + "</span><span class='time'>" + date + "</span></div>";

可以使用字符串替换来清理上述混乱，以避免每次打开和关闭字符串。即使对于简单的文本替换，我更喜欢使用replace而不是字符串连接。

这是一个简单的函数，它接受键和替换值的对象并在字符串中替换它们。它假定键带有前缀$以表示它们是特殊值。它不会进行任何转义或处理$出现在替换值等中的边缘情况。

function replaceAll(string, map) {
    for(key in map) {
        string = string.replace("$" + key, map[key]);
    }
    return string;
}

var string = '<div><span class="person $type">$name</span><span class="time">$date</span></div>';
var html = replaceAll(string, {
    type: personClass,
    name: personName,
    date: date
});
someElement.innerHTML = html;

这可以通过在构造对象时分离属性、文本等来改进，以获得对元素构造的更多编程控制。例如，使用 MooTools，我们可以将对象属性作为地图传递。这当然更易于维护，我也认为更具可读性。jQuery 1.4 使用类似的语法来传递一个映射来初始化 DOM 对象。

var div = new Element('div');

var person = new Element('span', {
    'class': 'person ' + personClass,
    'text': personName
});

var when =  new Element('span', {
    'class': 'time',
    'text': date
});

div.adopt([person, when]);

我不会称下面的纯 DOM 方法比上面的更具可读性，但它肯定更易于维护，因为我们不必跟踪开/关引号和众多加号。

var div = document.createElement('div');

var person = document.createElement('span');
person.className = 'person ' + personClass;
person.appendChild(document.createTextNode(personName));

var when = document.createElement('span');
​when.className = 'date​​​​​​';
when.appendChild(document.createTextNode(date));

​div.appendChild(person);
div.appendChild(when);

最易读的版本很可能来自使用某种JavaScript 模板。

<div id="personTemplate">
    <span class="person <%= type %>"><%= name %></span>
    <span class="time"><%= date %></span>
</div>

var div = $("#personTemplate").create({
    name: personName,
    type: personClass,
    date: date
});
于 2010-06-01T02:57:12.173 回答
8

如果要在代码中保留引用，则应使用 createElement。InnerHTML 有时会产生难以发现的错误。

HTML 代码：

<p id="parent">sample <span id='test'>text</span> about anything</p>

JS代码：

var test = document.getElementById("test");

test.style.color = "red"; //1 - it works

document.getElementById("parent").innerHTML += "whatever";

test.style.color = "green"; //2 - oooops

1）你可以改变颜色

2）您不能再更改颜色或其他任何内容，因为在上面的行中，您向 innerHTML 添加了一些内容，并且所有内容都被重新创建，并且您可以访问不再存在的内容。为了改变它，你必须再次getElementById。

您需要记住，它也会影响任何事件。您需要重新应用事件。

InnerHTML 很棒，因为它更快，更容易阅读，但你必须小心并谨慎使用它。如果你知道你在做什么，你会没事的。

于 2015-04-24T01:43:14.387 回答
1

模板文字（模板字符串）是另一种选择。

const container = document.getElementById("container");

const item_value = "some Value";

const item = `<div>${item_value}</div>`

container.innerHTML = item;
于 2019-10-15T14:45:09.227 回答