3.操作元素内容

news2024/9/26 3:20:19

3.1元素innerText属性

➢将文本内容添加/更新到任意标签位置
➢显示纯文本，不解析标签

【例如】

<body>
    <div class="box">文字内容</div>
    <script>
        // 1.获取元素
        const box = document.querySelector('.box')
        // 2.修改文字内容 对象.innerText属性
		//获取文字内容
        console.log(box.innerText) 
        //修改文字内容
        box.innerText = '<i>我是一个盒子</i>'  //不解析标签
    </script>
</body>

在这里插入图片描述

3. 2元素.innerHTML属性

➢将文本内容添加/更新到任意标签位置
➢会解析标签，多标签建议使用模板字符

【例如】

<body>
    <div class="box">文字内容</div>
    <script>
        // 1.获取元素
        const box = document.querySelector('.box')
        // 2.修改文字内容 对象.innerHTML属性
        console.log(box.innerHTML) //获取文字内容
        //修改文字内容 
        box.innerHTML = '<i>我是一个盒子</i>'
    </script>
</body>

在这里插入图片描述

3.3随机抽奖案例

需求：从数组随机抽取一等奖、二等奖和三等奖，显示到对应的标签里面。
【示例】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>一等奖：<span id="two">???</span></h3>
    <h5>一等奖：<span id="three">???</span></h5>
    <script>
        const personArr = ['周杰伦', '刘德华', '周星驰', '彭于晏', '张学友']
        //1.一等奖
        //1.1 随机数
        const random = Math.floor(Math.random() * personArr.length)
        //1.2 获取one元素
        const one = document.querySelector('#one')
        one.innerHTML = personArr[random]
        //1.3 取出后删除
        personArr.splice(random, 1)

        //2.一等奖
        //2.1 随机数
        const random2 = Math.floor(Math.random() * personArr.length)
        //2.2 获取two元素
        const two = document.querySelector('#two')
        two.innerHTML = personArr[random2]
        //2.3 取出后删除
        personArr.splice(random2, 1)

        //3.一等奖
        //3.1 随机数
        const random3 = Math.floor(Math.random() * personArr.length)
        //3.2 获取three元素
        const three = document.querySelector('#three')
        three.innerHTML = personArr[random3]
        //3.3 取出后删除
        personArr.splice(random3, 1)
    </script>
</body>

</html>