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

它可能是这样的：

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

您可以html在一行中声明您的变量，但由于其清晰性，我更喜欢这些多行方式。

请记住，您不能添加href到 div 元素！

Answer 3

您可以直接在 jQuery 函数中创建元素。

例子：

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

将创建一个 div 元素并升级 DOM 集合。