标签：appendChild 01js value 学生 let 模块 createElement li document
js创建节点和增加节点
增加学生信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.inform {
border: 1px solid #000;
}
.inform tr td {
border: 1px solid #000;
padding: 2px 5px;
}
.inform tbody tr:hover {
background: pink;
}
.bg1 {
background: pink;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名：</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>班级：</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td colspan="2" align="center">
<button onclick="addStudent()">增加</button>
</td>
</tr>
</table>
<hr>
<table class="inform">
<thead>
<tr>
<td>姓名</td>
<td>班级</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//获取文本框元素
let inputText = document.querySelectorAll("[type='text']")//伪数组 3
//获取性别按钮
let inputSex = document.querySelectorAll("[type='radio']")//伪数组 2
//获取增加信息表格节点
let tbodyObj = document.querySelector('.inform tbody')
for (let i = 0; i < inputSex.length; i++) {
inputSex[i].onclick = () => {
inputSex[i].setAttribute("checked", "checked")
}
}
function addStudent() {
if (inputText[0].value == "" || inputText[1] == "" || inputText[2] == "") {
alert("不能添空信息！！！")
} else {
//创建表格节点
let trObj = document.createElement('tr')
let userNmae = document.createElement('td')
let className = document.createElement('td')
let age = document.createElement('td')
let sex = document.createElement('td')
let operation = document.createElement('td')
//插入节点
tbodyObj.appendChild(trObj)
trObj.appendChild(userNmae)
trObj.appendChild(className)
trObj.appendChild(age)
trObj.appendChild(sex)
trObj.appendChild(operation)
//新增元素添加值
userNmae.innerHTML = inputText[0].value
className.innerHTML = inputText[1].value
age.innerHTML = inputText[2].value
operation.innerHTML = '删除'
//性别值取出value
for (let i = 0; i < inputSex.length; i++) {
if (inputSex[i].checked) {
sex.innerHTML = inputSex[i].value
}
}
//鼠标滑动背景变色
for (let i = 0; i < trObj.length; i++) {
trObj[i].onmouseover = function () {
this.className = 'bg1'
}
trObj[i].onmouseout = function () {
this.className = ''
}
}
//增加信息后清除文本内容
for (let i = 0; i < inputText.length; i++) {
inputText[i].value = ''
}
for (let i = 0; i < inputSex.length; i++) {
inputSex[i].removeAttribute("checked")
}
//增加信息后清除文本框内容
operation.onclick = function () {
let confirmObj = confirm('是否确认删除')
if (confirmObj) {
operation.parentNode.remove();
} else {
return 0;
}
}
}
}
</script>
</body>
</html>
发布论坛
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>课工场论坛列表</title>
<link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
<header><span>我要发帖</span></header>
<section>
<ul>
<!-- <li style="display: none;" class="linone"></li> -->
</ul>
</section>
<div class="post">
<input class="title" placeholder="请输入标题（1-50个字符）" value="">
所属版块：<select>
<option>请选择版块</option>
<option value="电子书籍">电子书籍</option>
<option value="新课来了">新课来了</option>
<option value="新手报到">新手报到</option>
<option value="职业规划">职业规划</option>
</select>
<textarea class="content"></textarea>
<input class="btn" value="发布" onclick="addText()">
</div>
</div>
<script>
//发帖的开关 获取元素
let headerObj = document.querySelector("header");
let post = document.querySelector(".post");
//发帖按钮的开关
let flag = 0; //创建一个变量来判断post是显示还是关闭 开启则等于1 关闭则等于0 这样可以控制单击开启和关闭
headerObj.onclick = () => {
if (flag === 0) { //如果等于0 则开启盒子
post.style.display = "block"; //点击显示post盒子
flag = 1;
} else { //否则点击盒子关闭
post.style.display = "none"; //点击关闭盒子
flag = 0;
}
}
//发帖模块操作
function addText() { //创建函数来控制发帖操作
let time = new Date(); //创建时间对象
let date = time.toLocaleDateString();//提取年月日
let hour = time.toLocaleTimeString();//提取时分秒
//获取元素节点
let titleObj = document.querySelector(".title");
let selectObj = document.querySelector("select");
let contentObj = document.querySelector(".content");
let btnObj = document.querySelector(".btn");
let ul = document.querySelector("section ul");
//创建元素节点
let li = document.createElement("li");
let div = document.createElement("div");
let img = document.createElement("img");
let h1 = document.createElement("h1");
let p = document.createElement("p");
let span1 = document.createElement("span");
let span2 = document.createElement("span");
let imgArr = ['images/tou01.jpg', 'images/tou02.jpg', 'images/tou03.jpg', 'images/tou04.jpg']; //把图片路径变成数组元素
let linone = document.querySelector('.linone');
//插入节点
li.appendChild(div);//div插入li中
li.appendChild(h1); //h1插入li中
li.appendChild(p) // p插入li中
div.appendChild(img); //img插入div中
p.appendChild(span1);//span1插入p中
p.appendChild(span2); //span2插入p中
//h1获取值
h1.innerHTML = titleObj.value; //h1中放入提交的标题内容
span1.innerHTML = '板块：' + selectObj.value; //第一个span 放入值
span2.innerHTML = '发表时间：' + date + " " + hour; //第二个span放入值
// Math.floor(Math.random()*(最大数-最小数+1)+最小数)
let numbRand = Math.floor(Math.random() * 4);//获取随机数
img.setAttribute("src", imgArr[numbRand]); //修改图片属性路径
ul.insertBefore(li, ul.childNodes[0]);//li插入ul中
post.style.display = "none"; //发布完后隐藏post盒子
//清除盒子里面填写的类容
titleObj.value = "";
selectObj.value = "请选择版块";
contentObj.value = "";
}
</script>
</body>
</html>
标签：appendChild,
01js,
value,
学生,
let,
模块,
createElement,
li,
document
From： https://www.cnblogs.com/daixiaoyang/p/16711323.html