06.js-文档流写入和元素写入

把元素直接写入文档流

使用 document.write(str)

1. 会把内容渲染到body
2. str 可以是标签，也可以是文本内容
3. 后面写入的内容不会覆盖前面写入的内容

<div class="wp" id="aa"></div>
    <div class="wp" id="bb">
        <h1>中午吃啥</h1>
        <h2>米饭</h2>
        <h2>面条</h2>
    </div>

document.write('<h1>秦琼</h1>');
document.write('<h1>秦用</h1>');
document.write('秦桧');
document.write('<div class="cell"></div><div class="cell"></div><div class="cell"></div>');

innerHTML

他是dom元素的一个属性，可以通过 innerHTML 设置和获取元素的内容

特点：

1. 后写入的内容会覆盖之前写入的内容
2. 可以写入标签，也可以写入文本

设置内容

dom.innerHTML =‘内容’ 如果内容是html结构，可以被渲染成html

获取内容

dom.innerHTML 获取到了dom元素中的html结构

innerText

他是dom元素的一个属性，可以通过 innerText 设置和获取元素的文本内容

特点:

1. 后面写的内容会覆盖前面写入的内容
2. 设置的时候如若是html结构，html结构不会被渲染，会原样写入

和 innerHTML 一样也可以设置和获取内容

注意: 获取的结果会过滤掉标签名，只会显示文本内容

let aa =document.getElementById('aa');
aa.innerHTML='铁木真';
aa.innerHTML+='术赤';
aa.innerHTML+='<h1>察合台</h1>';
console.log(aa.innerHTML);

let bb =document.getElementById('bb');
console.log(bb.innerHTML);
console.log(bb.innerText);
bb.innerText = '<h1>周末吃顿好的</h1>';