Question

您好我正在尝试将多个div显示为jQuery代码。但它显示的是空白页。

我无法弄清楚出了什么问题。

这是我的代码

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    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);
    });
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>

Answer 1

为什么jQuery然后不使用它。
您不会将生成的对象添加到正文（或结果）中。 document.body.appendChild(parent)或$("body").append(parent)或parent.appendTo("body")可在此处使用

非jQuery版

 window.onload=function() {
    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);
    document.body.appendChild(parent);
 }

jQuery版

$(function() {
    var parent = $("<div/>");
    parent.addClass("panel panel-default");

    var heading = $("<div/>");
    heading.addClass("panel-heading");

    var h3=$("<h3/>");
    h3.addClass("panel-title")
      .attr('id','panel_title')
      .text("DEMO"); 

    /* NOTE: The above can be written like this
    var h3 = $("<h3/>", {
     text: "DEMO",
    class: "panel-title",
       id: 'panel_title'
    });
    */

    heading.append(h3);

    var pbody=$("<div/>");
    pbody.addClass("panel-body");

    var prTable=$("<div/>")
    prTable.attr('id','print_received_table');
    pbody.append(prTable);

    parent.append(heading);
    parent.append(pbody);
    $("body").append(parent);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

猜猜你想要追加#result元素，到目前为止创建的每个元素都没有添加到页面中，除非你追加body或该页面上已经存在的元素，使用下面的代码来附加到标识为result的元素：

......
parent.appendChild(pbody);
// append parent element into result element
document.getElementById('result').appendChild(parent);

在jQuery上显示div元素

2 个答案: