JQuery 中。关于 HTML(“<td></td>”)和append(“<td></td>”)的区别

HTML("<td></td>")用来 把String型的HTML数据  当做内容写进  Jquery 对象(HTML控件或DOM元素)中。

会把。String行的转换成为 DOM元素的内容。  但如果是带有TD等DOM元素。则影响转换,必须用 Append()

Append("<td></td>")用来把 String的 HTML数据,转换成HTML元素。追加到 指定的 DOM元素。

今日。项目中出现了。 $("#loadData").html(data); 写入。IE+FIREFOX能够显示。而360浏览器。不能够显示的。问题:解决

: $("#loadData").append($(data));

jQuery HTML 操作
jQuery 包含很多供改变和操作 HTML 的强大函数。
改变 HTML 内容
语法
$(selector).html(content)
html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。
实例
$("p").html("W3School");
TIY
添加 HTML 内容
语法
$(selector).append(content)
append() 函数向所匹配的 HTML 元素内部追加内容。
语法
$(selector).prepend(content)
prepend() 函数向所匹配的 HTML 元素内部预置(Prepend)内容。
实例
$("p").append(" W3School");
TIY
语法
$(selector).after(content)
after() 函数在所有匹配的元素之后插入 HTML 内容。
语法
$(selector).before(content)
before() 函数在所有匹配的元素之前插入 HTML 内容。
实例
$("p").after(" W3School.");
TIY
jQuery HTML 操作 - 来自本页
函数	描述
$(selector).html(content)	改变被选元素的(内部)HTML
$(selector).append(content)	向被选元素的(内部)HTML 追加内容
$(selector).prepend(content)	向被选元素的(内部)HTML “预置”(Prepend)内容
$(selector).after(content)	在被选元素之后添加 HTML
$(selector).before(content)	在被选元素之前添加 HTML

<!DOCTYPE html> <html> <head> <title>订单事件列表</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- ajax 传输方式为post --> <script> window.onload = function () { // setInterval(Action) setTimeout(Action, 1000); } Action = function () { $.ajax({ url: "http://127.0.0.1:8088/admApi/getOrder", type: "get", success: function (data) { console.log('data'); console.log(data); // var orders = JSON.parse(data); var obj = new Function("return" + data)();//转换后的JSON对象 var orders = eval(obj); for (var i = 0; i < orders.length; i++) { var order = orders[i]; var username = order.username; var account = order.account; var orderName = order.orderName; var time = order.time; var html = "<tr><td>" + username + "</td><td>" + account + "</td><td>" + orderName + "</td><td>" + time + "</td></tr>"; $("#order-list").append(html); } console.log(data); } }); } // $(document).ready(function(){ // $.ajax({ // url: "http://127.0.0.1:8086/admApi/getOrder", // type: "get", // success: function(data){ // var orders = JSON.parse(data); // for(var i = 0; i < orders.length; i++){ // var order = orders[i]; // var username = order.username; // var account = order.account; // var orderName = order.orderName; // var time = order.time; // var html = "<tr><td>" + username + "</td><td>" + account + "</td><td>" + orderName + "</td><td>" + time + "</td></tr>"; // $("#order-list").append(html); // } // console.log(data); // } // }); // }); </script> </head> <body> <table> <thead> <tr> <th>用户名</th> <th>账号</th> <th>订单名称</th> <th>时间</th> </tr> </thead> <tbody id="order-list"> </tbody> </table> </body> </html>
06-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值