JS DOM等效于JQuery追加

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,所以需要关闭

Answer 2

使用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';

Answer 3

来自jQuery的源代码:

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

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

jQuery 1.7.2 源代码

Answer 4

在纯JavaScript中复制Jquery append方法的最简单方法是使用“ insertAdjacentHTML”

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

更多信息-MDN insertAdjacentHTML