12、动态创建元素
2022-08-31 本文已影响0人
一直流浪
（1）原生js创建节点：
- document.write()
- innerHTML()
- document.createElement()
（2）jQuert创建节点：
- html()
- $()
html()：
- 获取内容：html()无参是获取内容
- 设置内容：html()有参数，设置的内容会把原先的内容覆盖
$()：
- 能够创建元素，创建元素在内存中
- 如果需要显示，则需要使用append()追加元素
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="html()" id="btnHtml" />
<input type="button" value="$()" id="btn1" />
<div id="div1">
<p>p1
<span>span1</span>
</p>
</div>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
/*
* 原生js创建节点：
* (1) document.write()
* (2)innerHTML()
* (3)document.createElement()
*/
/*
* jQuert创建节点：
* (1)html()
* (2)$()
*/
//1. html()
$('#btnHtml').click(function(){
//1.1 获取内容：html()无参是获取内容
// console.log($('#div1').html());
//1.2设置内容：html()有参数
//设置的内容会把原先的内容覆盖
$('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度一下</a>');
});
//2. $()
//能够创建元素，创建元素在内存中
$('#btn1').click(function(){
var $link = $('<a href="https://leetcode-cn.com/problemset/all/">我的Leetcode</a>');
// console.log($link);
//追加元素
$('#div1').append($link);
});
})
</script>
案例：表格生成案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态生成表格</title>
<style>
*{
padding: 0;
margin: 0;
}
table{
border-collapse:collapse ;
border-spacing: 0;
}
thead{
display: table-header-group;
vertical-align: middle;
border-color:inherit ;
}
tbody{
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
th{
padding: 10px 10px;
background-color: skyblue;
border: 1px solid white;
}
td{
padding: 10px 10px;
background-color: #eeeeee;
border: 1px solid #999999;
}
</style>
</head>
<body>
<input type="button" value="获取数据" id="but_get" />
<table>
<thead>
<tr>
<th>标题</th>
<th>地址</th>
<th>说明</th>
</tr>
</thead>
<tbody id="tbDate">
</tbody>
</table>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
var data = [{
name:"知乎",
url:"https://www.zhihu.com/",
type:"找到你想知道的"
},{
name:"CSDN",
url:"https://www.csdn.net/",
type:"个人博客"
},{
name:"Leetcode",
url:"https://leetcode-cn.com/problemset/all/",
type:"刷题网站"
}];
//点击获取数据按钮，将data数据添加至表格
$('#but_get').click(function(){
//1.html()
//设置内容，内容中有标签会解析，会覆盖掉原来的内容
// var list= [];
// for(var i = 0;i<data.length;i++){
// //生成tr
// list.push("<tr>");
// //生成td
// for(var key in data[i]){
// list.push("<td>");
// list.push(data[i][key]);
// list.push("</td>");
// }
//
// list.push("</tr>");
// }
// //连接列表中的字符串
// console.log(list.join(""));
// $('#tbDate').html(list.join(""));
//2.$()
for(var i = 0;i<data.length;i++){
var $tr = $("<tr><td>"+data[i]['name'] +"</td><td>"+data[i]['url'] +"</td><td>"+data[i]['type'] +"</td></tr>")
console.log($tr);
//把创建出来的$tr追加tbody中
$('#tbDate').append($tr);
}
});
})
</script>
