javascript - JQuery 附加的 JS DOM 等效项

Question

JQuery 的标准 DOM 等效项是什么

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

Answer 1

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

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

一些解释：

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

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

Answer 2

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

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

更多信息 - MDN insertAdjacentHTML

Answer 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';

<div id="element"></div>

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

Answer 4

来自 jQuery 源代码：

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

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

jQuery 1.7.2源代码

Answer 5

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