<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮改变文字内容</p>
<script>
document.write("<h1>JavaScript能够直接写入HTML输出流中</h1>");
<!--输出这段文字-->
function myFunction(){
<!--定义一种改变文字内容的方法-->
x=document.getElementById("demo");
<!--找到元素-->
x.innerHTML="Hello JavaScript!";
<!--改变内容-->
}
function myFunction1(){
<!--定义一种改变文字样式的方法-->
x=document.getElementById("demo");
x.style.color="red";
}
</script>
<button type="button" οnclick="alert('Welcome!')">点击这里弹出对话框</button>
<!--点击按钮弹出Welcome!对话框-->
<button type="button" οnclick="myFunction()">点击这里改变文字内容</button>
<!--点击按钮调用该方法-->
<button type="button" οnclick="myFunction1()">点击这里改变文字样式</button>
</body>
</html>
显示效果:
![](https://i-blog.csdnimg.cn/blog_migrate/05f733ed3f514fa10187bfaf8cf7bf2c.jpeg)