JQuery 附加的 JS DOM 等效项答案

【问题标题】：JS DOM equivalent for JQuery appendJQuery 附加的 JS DOM 等效项
【发布时间】：2012-04-25 14:58:08
【问题描述】：

JQuery 的标准 DOM 等价物是什么

element.append("<ul><li><a href='url'></li></ul>")?

【问题讨论】：

它必须是你要附加的字符串吗？

【解决方案1】：

我认为你必须扩展 innerHTML 属性才能做到这一点

element[0].innerHTML += "<ul><li><a href='url'></a></li></ul>";

一些解释：

[0] 需要，因为 element 是一个集合
+= 扩展 innerHTML 并且不覆盖
需要关闭</a>，因为某些浏览器只允许将有效的html设置为innerHTML

提示：正如@dontdownvoteme 提到的，这当然只会针对集合element 的第一个节点。但由于 jQuery 的性质，该集合可以包含更多条目

【讨论】：

@Tobias Krogh Uncaught ReferenceError: element is not defined at :1:1
@Shayan 你能多说一点上下文吗？您不能只将该行放入控制台或脚本中。 element 需要是 jQuery 集合
@dontdownvoteme 你能提供更多背景信息吗？当您尝试这样做时，element 是什么？也许一个小代码块会有所帮助??
@TobiasKrogh using [0] 您试图仅访问第一个元素。
@dontdownvoteme 确实！我将此添加为答案的提示。谢谢指出

【解决方案2】：

在纯 JavaScript 中复制 JQuery 追加方法的正确和最简单的方法是使用“insertAdjacentHTML”

    var this_div = document.getElementById('your_element_id');
    this_div.insertAdjacentHTML('beforeend','<b>Any Content</b>');

更多信息 - MDN insertAdjacentHTML

【讨论】：

【解决方案3】：

使用 DOM 操作，而不是 HTML：

let element = document.getElementById('element');

let list = element.appendChild(document.createElement('ul'));
let item = list.appendChild(document.createElement('li'));
let link = item.appendChild(document.createElement('a'));

link.href = 'https://example.com/';
link.textContent = 'Hello, world';

&lt;div id="element"&gt;&lt;/div&gt;

这具有不重新创建现有内容的节点的重要优势，例如，这将删除附加到它们的任何事件侦听器。

【讨论】：

element 是一个 jQuery 集合......所以在我看来你需要element[0].appendChild(list);
@TobiasKrogh：我认为如果 OP 不想使用 jQuery 附加元素，那么 OP 就不再使用 jQuery。在我看来。
@minitech。 :) 我相信这是一个好奇的问题，而不是真正的需要。
@gdoron：嗯，实际上我恰好将当前项目完全从 jQuery 中移除。所以也许这是现实世界:)
@minitech：这是一个好奇心和一个真正的项目。我想将整个项目移动到标准 JS。我不想重新发明轮子，但我就是不喜欢 JS 库（因为我并不总是了解它们的作用和方式）。 :-)

【解决方案4】：

来自 jQuery 源代码：

append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 ) {
            this.appendChild( elem ); //<====
        }
    });
},

请注意，为了使其工作，您需要从字符串构造 DOM 元素，这是使用 jQuery domManip 函数完成的。

jQuery 1.7.2 source code

【讨论】：

document.body.appendChild("
") // 错误：NOT_FOUND_ERR: DOM Exception 8... 至少我在 Chrome 中得到了这个-.- 我认为 appendChild 仅适用于实际节点
@TobiasKrogh：domManip 很重要。
@gdoron 你能更详细地向我解释一下吗？我从你的回答中了解到的是（因为“
@TobiasKrogh。没关系。 domManip 是一个 jQuery 函数，而不是原生 javascript 函数。你可以在source code看到它。
@gdoron：啊，现在我明白了...所以您指出了 jquery.js 中的 .append() 是什么...也许像我一样添加一些解释会很好“

【解决方案5】：

element.innerHTML += "<ul><li><a href='url'></li></ul>";

【讨论】：

Uncaught ReferenceError: element is not defined at :1:1