javascript - 要素に子要素を追加する方法は？

Question

私はjQueryで要素を作成するための好ましい方法に精通しています：

jQuery('<div/>', {
    id: 'foo',
    href: 'http://google.com',
}).appendTo('#mySelector');

しかし、上記よりも少し複雑な要素をいくつか作成する必要があります。次のようなものを出力するようにコードをビルドする方法はありますか？

<div id="foo" href="http://google.com"> 
   <h1> Heading </h1>
   <div id="child-div">
      Conetent created from jQuery vars
   </div>
</div>

Answer 1

html文字列をjQuery関数に渡すだけです。

jQuery('<div id="foo" href="http://google.com"><h1> Heading </h1><div id="child-div">Conetent created from jQuery vars</div></div>')
.appendTo('#mySelector');

または各要素を個別に作成します

jQuery('<div/>', {
    id: 'foo',
    href: 'http://google.com',
})
.append('<h1/>', {text: ' Heading '})
.append('<div/>', {id: 'child-div', text: 'Conetent created from jQuery vars'})
.appendTo('#mySelector');

Answer 2

jQuery関数内に直接要素を作成できます。

例：

$("<div></div>");

div要素を作成し、DOMコレクションをアップグレードします。

Answer 3

これは次のようなものである可能性があります。

var html = '<div id="foo">';
html += '  <h1>Heading</h1>';
html += '  <div id="child-div">';
html += '    <p>'+myVar+'</p>';      //Content created from jQuery vars
html += '  </div>';
html += '</div>';
$('#mySelector').append( html );

変数は1行で宣言できますがhtml、わかりやすいので、これらの複数行の方法をお勧めします。

hrefdiv要素に追加できないことを忘れないでください！