网站推广品牌/北京优化网站方法
文章目录
- 如何使用js添加html标签
如何使用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>
显示: