javascript - JQueryの追加に相当するJSDOM

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

詳細-MDNinsertAdjacentHTML

Answer 3

HTMLではなくDOM操作を使用します。

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関数を使用して実行されます。

jQuery1.7.2ソースコード

Answer 5

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