现在的位置: 首页 > 综合 > 正文

【转】使用Javascript改变HTML内容

2013年06月20日 ⁄ 综合 ⁄ 共 1525字 ⁄ 字号小中大 ⁄ 评论关闭

原文地址：http://www.qeefee.com/js/change-html-used-javascript

更多Javascript教程，欢迎访问起飞网>>Javascript教程

正文：

Javascript通常被用来操作HTML，改变网页内容！

向页面输出内容

Javascript提供了document.write('string')方法来向页面写入内容：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>使用Javascript改变HTML内容的测试-起飞网</title>
    <script type="text/javascript">
        document.write("我是来自JS的内容~");
        
        function writeHtmlLater() {
            document.write("哈哈，我把内容覆盖了~");
        }
    </script>
</head>
<body>
    <h1>使用Javascript改变HTML内容的测试-起飞网</h1>
    <p><input type="button" value="点击覆盖所有内容" onclick="writeHtmlLater()" /></p>
</body>
</html>

你可以把这段代码复制到html文件中，并运行，当页面在浏览器中运行时，效果如图：

这个时候我们点击按钮，你会发现页面中的所有内容都被覆盖了：

覆盖页面内容的“罪魁祸首”就是按钮onclick事件所调用的writeHtmlLater方法，这个方法同样是向页面中写入一句话，但却把整个页面都覆盖了，这里需要注意：

document.write() 仅仅向文档输出写内容，如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

改变HTML标签内容

我们使用JS并不仅仅是向文档输出一些内容，更多的是改变已存在标签的显示。在Javascript中提供了访问文档标签的方法：document.getElementById()方法，我们可以通过这个方法得到想要操作的HTML标签，并改变它们的显示：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>使用Javascript改变HTML内容的测试-起飞网</title>
    <script type="text/javascript">
        function changeMySpanHtml() {
            document.getElementById("mySpan").innerHTML = "我是被JS改变后的内容";
        }
    </script>
</head>
<body>
    <h1>使用Javascript改变HTML内容的测试-起飞网</h1>
    <p>span内容：<span id="mySpan">我是span标签的原始内容！</span></p>
    <p><input type="button" value="点击改变span内容" onclick="changeMySpanHtml()" /></p>
</body>
</html>

运行这段代码，你会看到如下页面内容：