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。但据我所知，这感觉很腥，很难读，而这只是另一种方法。

<强>更新

您要求我展示的方法是使用纯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的{{1}}任意位置使用DOM appendChild

Answer 2

将完整的html字符串传递给构造函数，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"><?div>

{{1}}

Answer 3

有几种方法可以做到这一点，虽然你可以一次性完成并让DOM自己解析该片段（参见Guruprasad或Delighted答案），你也可以像这样链接jquery命令：

 $('<div />').addClass('panel panel-default')
      .append('<div />').addClass('panel-heading')
         .append('<h3 />').addClass('panel-title').text('Demo')
         .end().end()
      .append('<div />').addClass('panel-body')
         .append('<div />').attr('id', 'print_received_table')

如何将div类插入JQuery？

3 个答案: