如何将 div 类插入 JQuery？答案

【问题标题】：How to insert div class into JQuery?如何将 div 类插入 JQuery？
【发布时间】：2015-09-29 10:04:21
【问题描述】：

您好，我正在尝试用 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"> 我想做父节点。

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

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

【问题讨论】：

您想使用jquery 或javascript 创建它吗？
@guruprasad JQuery..

标签： jquery html twitter-bootstrap

【解决方案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，可以使用前面提到的.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);

现在您可以在 DOM 中的任何位置使用 parent element 到 append 它使用 appendChild

【讨论】：

` document.createElement('div') ` 我们可以这样做吗？
我们可以做到.. 你需要使用.appendChild 然后附加内部内容。 @Awanti
你能给我看一个例子吗？如果是多个div？？
任何时候..快乐编码..:)

【解决方案2】：

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

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


$('#result').append(element);

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

【讨论】：

【解决方案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')

【讨论】：