jquery - 如何将 div 类插入到 JQuery 中？

Question

您好，我正在尝试用 JQuery 编写 Bootstrap 面板的头部和主体。

这是我的 HTML 代码:

<div class="panel panel-default">
        <div class="panel-heading">
                <h3 class="panel-title" id="panel_title">Demo</h3>
        </div>
        <div class="panel-body">
                <div id=print_received_table></div>
        </div>
</div>

如果是一个div元素我们可以这样创建 document.createElement('div')但是如果它不止一个 div 呢？

本类(class)<div class="panel panel-default"> 我想做父节点。

我只是被困在这里。请建议我该怎么做？

任何帮助将不胜感激。提前致谢。

Answer 1

您可以按如下方式进行:

var element=$('<div class="panel panel-default">'
              +'<div class="panel-heading">'
              +'<h3 class="panel-title" id="panel_title">Demo</h3>'
              +'</div>'
              +'<div class="panel-body">'
              +'<div id="print_received_table"></div>'
              +'</div>'
              +'</div>'
            );

现在您可以使用 element 并将其附加到 DOM 中的任何位置，如下所示:

$('yourselectorID').append(element);

另一种选择是一个一个地创建元素，然后根据其结构附加它，最后将它附加到DOM，如下所示:

var parent=$('<div/>', {
    class: 'panel panel-default',
});

var heading=$('<div/>', {
    class: 'panel-heading',
});

var h3=$('<h3/>', {
    class: 'panel-title',
    id:'panel_title',
    text:'Demo'
});

var body=$('<div/>', {
    class: 'panel-body',
});

var prTable=$('<div/>', {
    id: 'print_received_table',
});

heading.append(h3);
body.append(prTable);
var element=parent.append(heading).append(body);

现在你有了你的元素，它可以使用前面提到的相同的.append方法附加到DOM。但在我看来，这让人感觉可疑且难以阅读，而这只是实现它的另一种方法。

---

更新

您要我展示的方法是使用纯 javascript，您可以使用 appendChild 和 className 等，如下所示:

var parent = document.createElement("div");
parent.className="panel panel-default";

var heading = document.createElement("div");
heading.className="panel-heading";
var h3=document.createElement("h3");
h3.className="panel-title";
h3.setAttribute('id','panel_title');
var t = document.createTextNode("DEMO"); 
h3.appendChild(t);
heading.appendChild(h3);

var pbody=document.createElement('div');
pbody.className="panel-body";
var prTable=document.createElement('div');
prTable.setAttribute('id','print_received_table');
pbody.appendChild(prTable);

parent.appendChild(heading);
parent.appendChild(pbody);

现在您可以使用父元素通过appendChild将其append到DOM中的任何位置