Rumah > Artikel > hujung hadapan web > Javascript中如何对DOM元素的添加
Javascript中如何对DOM元素的添加
- autoloadasal
- 2021-04-08 16:20:464925semak imbas
HTML内容为空
<!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>php.cn</title>
</head>
<body>
</body>
</html>1.创建DOM元素
<script>
const ul=document.createElement("ul");
</script>2.在DOM中添加内容
<span style="font-size: 16px;">append()</span>在被选元素的结尾插入指定内容
<script>
const ul=document.createElement("ul");
for(let i=1;i<=5;i++){
const li=document.createElement("li");
li.textContent=`item${i}`;
ul.append(li);
}
document.body.append(ul);
</script><span style="font-size: 16px;">prepend()</span>在被选元素头部添加指定内容
<script>
//append()创建一个列表
const ul=document.createElement("ul");
//循环来生成多个列表li
for(let i=1;i<=5;i++){
const li=document.createElement("li");
li.textContent=`item${i}`;
ul.append(li);
}
console.log(ul);
//prepend()在头部添加li
li=document.createElement("li");
li.textContent="first item";
li.style.color="red";
ul.prepend(li);
document.body.append(ul);
</script>推荐：《2021年js面试题及答案（大汇总）》
Atas ialah kandungan terperinci Javascript中如何对DOM元素的添加. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：浏览器不支持javascript怎么办Artikel seterusnya：javascript怎么将日期时间转为时间戳