网站推广品牌/北京优化网站方法
文章目录
- 如何使用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>
显示：
