<p> JavaScript 能够直接写入 HTML 输出流中： </p> <script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); </script> <p> 您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。 </p>
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>
</body>
</html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <h1>我的第一段JavaScript</h1> <p> JavaScript 能够对事件作出反应。比如对按钮的点击： </p> <button type="button" onclick="alert(‘hello world!‘)">点击这里</button> </body> </html>
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body><h1>我的第二段 JavaScript</h1> <p id="demo">JavaScript能改变html的内容</p> <script> function myFunction() {x=document.getElementById("demo");//找到元素 x.innerHTML="hello javascript";//改变内容 }
//document.getElementById("demo").innerHTML="hello javascript";
; </script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <script> function changeimage() {element=document.getElementById("myimage") if(element.src.match("W020140820293362535623"))//匹配 { element.src="素材/fad4e632d27affc7d69ccf49bf08cf79.jpg"; } else { element.src="素材/W020140820293362535623.jpg"; } } </script> <img id="myimage" onclick="changeimage()" src="素材/W020140820293362535623.jpg"> <p>点击图片更改图片</p> <p>javascript能改变任意html元素的大多数属性，而不仅仅是图片</p> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <h1>我的第三段 JavaScript</h1> <script> function myFunction() {x=document.getElementById("demo") // 找到元素 if(x.style.color="#0C3") {x.style.color="#03C"; } else { x.style.color="#0C3";} // 改变样式 } </script> <p id="demo" onclick="myFunction()" style="color:#0C3"> JavaScript 能改变 HTML 元素的样式。 </p> <button type="button" onclick="myFunction()">点击这里</button> <p>怎么不行呢？</p> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <img id="myimage" onclick="changeimage()" src="素材/W020140820293362535623.jpg"> <script type="text/javascript" src="myjavascript/改变图片.js"></script>
<p>调用外部JavaScript</p>
<p><b>提示：</b>外部脚本不能包含 <script> 标签。</p>
<p><b>注释：</b>changeimage保存在名为 "改变图片.js" 的外部文件中。</p>
</body> </html>
原文：http://www.cnblogs.com/liuyudong0825/p/4805799.html