javascript - jQuery なしで DOM に追加する

Question

これは単純なはずですが、そうではありません。

document.getElementsByTagName('body')[0].document.createTextNode( document.createElement('<div>some HTML</div>') );

テキストノードとして作成します。jQuery を使わずに HTML を追加するにはどうすればよいですか?

Answer 1

閉じますが、葉巻はありません。要素を手動で ( 経由でcreateElement)作成し、次のように追加する必要があります。

var div = document.createElement("div");
div.innerHTML = "some HTML";
document.getElementsByTagName('body')[0].appendChild(div);

innerHTML残念ながら、要素のプロパティを設定する関数がないため、ワンライナーでこれを行うことはできません。つまり、要素はチェーン可能ではありません。ただし、少し準備すれば、これを可能にすることができます。

function setInnerHTML(element, content) {
    element.innerHTML = content;
    return element;
} 

document.getElementsByTagName('body')[0].appendChild(setInnerHTML(document.createElement("div"), "some HTML"));

Answer 2

多くの方法があります：

elem.innerHTML = ''   // fast
elem.appendChild()    
elem.insertAdjacentElement()  //fast    
elem.insertAdjacentHTML()
elem.insertAdjacentText()

Answer 3

document.body.innerHTML+=document.createElement('div').outerHTML;