javaScript改变HTML

Posted 千彧

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript改变HTML相关的知识，希望对你有一定的参考价值。

改变html输出流：

在javascript中，document.write() 可用于直接向HTML输出流写内容

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <script>
 6 document.write(Date());
 7 </script>
 8 
 9 </body>
10 </html>

不要再文档加载之后使用document.writr()  这会覆盖文档。

 

改变HTML内容

修改HTML内容最简单的方法时使用innerHTML属性

 1 <html>
 2 <body>
 3 
 4 <p id="p1">Hello World!</p>
 5 
 6 <script>
 7 document.getElementById("p1").innerHTML="New text!";
 8 </script>
 9 
10 </body>
11 </html>

改变HTML属性

本例改变了<img>元素的src属性

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <img id="image" src="smiley.gif">
 6 
 7 <script>
 8 document.getElementById("image").src="landscape.jpg";
 9 </script>
10 
11 </body>
12 </html>

改变HTML元素的样式

本例改变了id="id1" 的HTML元素的样式，当用户点击按钮时：

1 <h1 id="id1">My Heading 1</h1>
2 
3 <button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘">
4 点击这里
5 </button>

 

使元素可见或不可见：

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <p id="p1">这是一段文本。</p>
 6 
 7 <input type="button" value="隐藏文本" onclick="document.getElementById(‘p1‘).style.visibility=‘hidden‘" />
 8 <input type="button" value="显示文本" onclick="document.getElementById(‘p1‘).style.visibility=‘visible‘" />
 9 
10 </body>
11 </html>

 

以上是关于javaScript改变HTML的主要内容，如果未能解决你的问题，请参考以下文章

sublime text 3 添加 javascript 代码片段 ( snippet )

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发

html 将以编程方式附加外部脚本文件的javascript代码片段，并按顺序排列。用于响应式网站，其中ma

炫酷 CSS 背景效果的 10 个代码片段

HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段