文章目录
如何使用js添加html标签
其实很简单,只需要以下几个步骤:
1.使用getElementById获取想要写的标签的父标签对象(body除外,当然body也可以获取,当时没必要,因为他可以通过document.body直接调用)
2.使用createElement创建标签对象
3.设置标签的属性和文本信息
4.使用步骤1获取到的父标签对象的appendChild方法添加标签
详细代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*所有li标签都适用*/
li{
color:orangered;
}
</style>
<script type="text/javascript">
window.onload = function () {
//在body中添加标签
//添加div元素(在内存中)
let divObj = document.createElement('div');
divObj.innerHTML = "我是js添加的文字";
//把div添加到body作为他的子元素
document.body.appendChild(divObj);
//在ul中添加标签
//获取ul标签
let uList = document.getElementById('uList');
//添加li元素
let liObj = document.createElement('li');
//设置标签样式,当然也可以设置其他的属性值
liObj.setAttribute('style','background:grey');
//设置标签的文本信息
liObj.innerText = 'Python';
// 把js新建的li放到ul下
uList.appendChild(liObj);
}
</script>
</head>
<body>
<div>下面是几个常用的编程语言</div>
<ul id="uList">
<li>C</li>
<li>C++</li>
<li>Java</li>
</ul>
</body>
</html>
显示: