JavaScript学习笔记（DOM-改变HTML）

最新推荐文章于 2020-10-21 19:06:53 发布

闪电蛙

最新推荐文章于 2020-10-21 19:06:53 发布

阅读量206

点赞数

分类专栏： # javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42893085/article/details/106348056

版权

javaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

改变 HTML 输出流

JavaScript 能够创建动态 HTML 内容：
Tue May 26 2020 09:07:47 GMT+0800 (中国标准时间)
在 JavaScript中，document.write()可用于直接写入HTML输出流中：

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

在这里插入图片描述
千万不要在文档加载后使用document.write()。这么做会覆盖文档。

改变HTML内容

修改HTML文档内容最简单的方法是，使用innerHTML属性。
如需要修改HTML元素的内容，请使用此语法：

document.getElementById(id).InnerHTML = new text

本例修改了p元素的内容：
例子：

<body>
    
    <h2>JavaScript 可以更改 HTML</h2>

    <p id="p1">Hello World!</p>

    <script>
        document.getElementById("p1").innerHTML = "hello 你是不是傻！"
    </script>
</body>

在这里插入图片描述
例子解释：

上面的HTML文档包含id="p1"的p元素
我们使用HTML DOM来获取id="p1"的这个元素
JavaScript把该元素的内容(innerHTML)更改为”hello 你是不是傻!“
本例修改了h1元素的内容：
实例：

<body>
    
    <h2 id="id02">旧标题</h2>


    <script>
        var element = document.getElementById("id02");
        element.innerHTML = "新标题";
    </script>

    <p>JavaScript 将“旧标题”更改为“新标题”。</p>
</body>

在这里插入图片描述
例子解释：

上面的HTML含有id="header"的一个h1元素
我们使用了HTML DOM来获取id=”header“的元素
JavaScript更改此元素的内容(innerHTML)

改变属性的值

语法格式：

document.getElementById(id),attribute = new value

本例修改了img元素的src属性的值：
例子：

<body>
    
    <img id="image" src="img/girl8.jpg">
    <script>
        document.getElementById("image").src = "img/s6.png";
    </script>

    <p>原始图像是<b> irl8.jpg</b>,但脚本将其更改为<b>s6.png</b></p>
</body>

在这里插入图片描述
例子解释：

上面的HTML文档含有一个id="myImage"的img元素
我们使用HTML DOM 来获取id="myImage"的元素
JavaScript把此元素的src属性从"girl8.jpg"更改为"s6.png"

闪电蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（DOM-改变HTML）

HTML DOM 允许Javascript改变HTML元素的内容。改变 HTML 输出流JavaScript 能够创建动态 HTML 内容：Tue May 26 2020 09:07:47 GMT+0800 (中国标准时间)在 JavaScript中，document.write()可用于直接写入HTML输出流中：<body> <script> document.write(Date()); </script></body
复制链接

扫一扫