document.write()

这个方法只适合在页面加载期间向页面写入内容。如果页面加载后使用该方法,会覆盖网页所有内容。
<!-- 省略部分代码 --> <body>    <div>我是div标签里的内容</div>    <p>我是p标签里的内容</p>  
 <button>点击</button></br>    <script>      
 document.write("我在页面加载期间通过write()方法写入");      
 document.querySelector('button').addEventListener('click', function() {      
     document.write("我通过点击按钮写入,并且覆盖了页面所有内容!");       })    </script> </body>
执行结果:

Element.innerText()

这个方法只适合向页面写入纯文本内容,并且会覆盖该元素节点下的所有内容。
<body>    <button>点击</button></br>    <p>我是p标签里的内容</p>  
 <div>我是div标签里的内容</div>    <script>      
 document.querySelector('button').addEventListener('click', function() {      
     document.querySelector('p').innerText = "我是p标签里的内容";          
 document.querySelector('div').innerText = "<span>我向div标签里添加了span标签</span>";  
    });    </script> </body>
执行结果:

Element.innerHTML()

这个方法既可以向页面写入文本内容,也可以写入元素内容,并且会覆盖该元素节点下的所有内容。
// 修改上面的代码 document.querySelector('button').addEventListener('click',
function() { document.querySelector('p').innerHTML = "我是p标签里的内容";
document.querySelector('div').innerHTML = "<span>我向div标签里添加了span标签</span>"; });
执行结果:

document.createElement()

使用这个方法创建的元素,需要通过 appendChild()、insertBefore() 或 replaceChild() 方法添加到指定的文档树节点中,
不会覆盖原有的元素。
<body>    <button>点击</button></br>    <p>我是p标签里的内容</p>  
 <div>我是div标签里的内容</div>    <script>      
 document.querySelector('button').addEventListener('click', function() {      
     let span = document.createElement('span');            span.innerHTML =
"我是创建的span节点,会被添加到div标签中。";          
 document.querySelector('div').appendChild(document.createElement('br'));      
     document.querySelector('div').appendChild(span);       });    </script>
</body>
执行结果:

 

技术
©2019-2020 Toolsou All rights reserved,
TypeScript:函数类型接口8道大厂指针笔试题让你秒杀指针!!!MySQL 日期时间加减mysql 查询条件之外的数据_mysql 查询符合条件的数据查linux的操作系统版本,如何查看Linux操作系统版本?将String类型转换成Map数据类型使用uuid做MySQL主键,被老板,爆怼一顿C语言中的字符串函数和字符函数linux服务器中毒排查--基础篇C# ASCII码字符转换