购物车
登陆 / 注册
微信扫码登陆

推荐手册

DOM HTML

DOM HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
前端控 前端控 更新时间:2019-02-13 16:43:40

JavaScript HTML DOM - 改变 HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容:

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

实例

<script>
document.write(Date());
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 23.jpg

注意:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档

改变 HTML 内容

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

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=new HTML

实例

<!DOCTYPE html>
<html>
<body>
<p id="demo">PHP中文网</p>
<script>
  document.getElementById("demo").innerHTML="0133技术站";
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 24.jpg

改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new value

实例

<!DOCTYPE html>
<html>
<body>
<img src="./images/22.jpg" id="img">
<script>
  document.getElementById("img").src="./images/44.jpg";
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 25.jpg

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号