如何使用js添加html标签

文章目录

  • 如何使用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>Titletitle>
    <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>Cli>
        <li>C++li>
        <li>Javali>
    ul>
body>
html>

显示:
如何使用js添加html标签_第1张图片

你可能感兴趣的:(JavaScript)