<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>修改对象内容</title>
</head><body><div class="box">我是文字内容</div><script>// 1.获取元素const box = document.querySelector('.box')// 2.修改文字内容 对象.innerText属性console.log(box.innerText)//获取文字内容// box.innerText = '我被修改了'// box.innerText = '<strong>我被修改了</strong>'//标签不生效，即innerText不解析标签// 3.对应的，innerHtml能够解析标签console.log(box.innerHTML)box.innerHTML = '<strong>我能够生效标签</strong>'</script>
</body></html>
下面是一个抽抽奖案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>年会抽奖</title><style>.wrapper {width: 840px;height: 420px;background: url(./images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}</style>
</head><body><div class="wrapper"><strong>传智教育年会抽奖</strong><h1>一等奖：<span id="one">???</span></h1><h3>二等奖：<span id="two">???</span></h3><h5>三等奖：<span id="three">???</span></h5></div><script>// 1.声明数组const personArry = ['刘德华', '周星驰', '周杰伦', '张学友', '黄家驹']// 2.抽一等奖// 抽取随机数，作为数组的下标const random = Math.floor(Math.random() * personArry.length)// 获取Dom元素const one = document.querySelector('#one')// 将抽取的数组赋值给对象one.innerHTML = personArry[random]// 删除抽取过的名字personArry.splice(random, 1)// console.log(personArry)// 二等奖同理const random2 = Math.floor(Math.random() * personArry.length)const two = document.querySelector('#two')two.innerHTML = personArry[random2]personArry.splice(random, 1)const random3 = Math.floor(Math.random() * personArry.length)const three = document.querySelector('#three')three.innerHTML = personArry[random3]personArry.splice(random, 1)</script>
</body></html>
{{image.png(uploading...)}}
