JavaScript基础知识之_day02 使用Javascript改变HTML内容

Javascript通常被用来操作HTML,改变网页内容!

向页面输出内容

Javascript提供了document.write('string')方法来向页面写入内容:



    
    使用Javascript改变HTML内容的测试
    


    

使用Javascript改变HTML内容的测试

你可以把这段代码复制到html文件中,并运行,当页面在浏览器中运行时,我们点击按钮,你会发现页面中的所有内容都被覆盖了
覆盖页面内容的“罪魁祸首”就是按钮onclick事件所调用的writeHtmlLater方法,这个方法同样是向页面中写入一句话,但却把整个页面都覆盖了,这里需要注意:

document.write() 仅仅向文档输出写内容,如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

改变HTML标签内容

我们使用JS并不仅仅是向文档输出一些内容,更多的是改变已存在标签的显示。在Javascript中提供了访问文档标签的方法:document.getElementById()方法,我们可以通过这个方法得到想要操作的HTML标签,并改变它们的显示:



    
    使用Javascript改变HTML内容的测试
    


    

使用Javascript改变HTML内容的测试

span内容:我是span标签的原始内容!

运行这段代码,当我们点击改变Span内容按钮后,你会发现span标签的内容改变了:这是因为我们在代码中获取到了这个标签,并重新为它的innerHTML属性赋值所引起的。

你可能感兴趣的:(JavaScript基础知识之_day02 使用Javascript改变HTML内容)