AngularJS jqlite的append()和jQuery的append()在<td>元素上表现不同

Question

我是一个有用的助手，我会翻译文本。

我正在尝试将一些元素添加到

中，使用内置的jqlite和jquery时看到了一些不同的行为。我创建了一个演示区以展示差异: http://jsfiddle.net/waylon999/5fyBt/1/

当我这样做时，情况似乎是这样:

element.append('<td>Val 1</td><td>Val 2</td>'); // jqlite

在插入字符串之前，标签会被剥离。但是当我尝试

$(element).append('<td>Val 1</td><td>Val 2</td>'); 

它的工作方式符合我的预期，在append中，整个字符串参数将被附加到标签中。我尝试了几种方法，包括

angular.element(element).append(....)

但我找不到使它工作的方法。是否存在我没有理解的关于它如何工作的东西？

谢谢！

- user417918

---

如果你无论如何都要使用jQuery，那么你可以先确保它被包含进来，从而避免这个问题。 :) - Langdon

是的，“权力机构”希望尽可能避免添加完整的jQuery库。我只是想看看是否有足够好的理由来添加它。 :) - user417918

如果你只想替换所有的内容，只需使用element.html()，它会起作用。 - Ajay Beniwal

至少看起来有权威的人很酷，愿意使用Angular。如果可以避免使用jQuery，我通常也会同意这种观点。 - Langdon

Answer 1

据我所知，这是JQLite中的一个错误：

function JQLite(element) {

    ...

    if (isString(element)) {
        var div = document.createElement('div');
        // Read about the NoScope elements here:
        // http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
        div.innerHTML = '<div>&#160;</div>' + element; // IE insanity to make NoScope elements work!
        div.removeChild(div.firstChild); // remove the superfluous div
        JQLiteAddNodes(this, div.childNodes);
        this.remove(); // detach the elements from the temporary DOM div.
    } else {
        JQLiteAddNodes(this, element);
    }
}

你可能知道或不知道，你不能做到这一点：

div.innerHTML = '<div></div><td>asdf</td>';

td元素将被移除。我猜测jQuery不会执行同样的操作（也许他们不关心NoScope？）。话虽如此，如果你想继续只使用Angular，这个解决方案也可以正常工作：

element[0].innerHTML += '<td>Val 1xx</td><td>Val 2yy</td>'; 

我建议在Angular的Github上提交一个问题。

- Langdon

---

这个问题已经在 Github 上有一个 issue：https://github.com/angular/angular.js/issues/1459 - forivall

似乎这是一个单独的（但类似的）问题。每个人似乎都关注修复jqLite周围的问题，而不是主要的jqLite函数本身。 - Langdon

Answer 2

另一种解决方案是这样的：

    var cells = angular.element('<table><tbody><tr>' +
                                '<td>Val 1</td><td>Val 2</td>' +
                                '</tr></tbody></table>').children().children().children();
    element.append(cells);

那里很丑，但我猜你可以将它封装在一个实用函数中。

也许最好的解决方案是直接删除那个 IE 疯狂 的行。

http://jsfiddle.net/5fyBt/2/

- forivall