gpt4 book ai didi

jquery - 在 jQuery 上显示 div 元素

转载 作者:搜寻专家 更新时间:2023-10-31 23:24:56 24 4
gpt4 key购买 nike

您好,我正在尝试将多个 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>

最佳答案

  1. 为什么使用 jQuery 然后不使用它。
  2. 不要将生成的对象添加到正文(或结果)中。 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>

关于jquery - 在 jQuery 上显示 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32858062/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com