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

你可以在一行中声明你的html变量，但我更喜欢这种多线方式，因为它的清晰度。

请记住，您无法将href添加到div元素中！

如何附加带子元素的元素？

3 个答案: