如何将div类插入JQuery？

Question

嗨,我正在尝试在JQuery中编写引导板头部和主体.

这是我的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呢.

这个类<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);

其他选项是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);

现在你element可以DOM 使用.append前面提到的相同方法附加你的.但据我所知,这感觉很腥,难以阅读,这只是另一种方法.

UPDATE

你问我要表明,该方法是使用纯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);

现在您可以parent element在append任何地方DOM使用它appendChild