javascript innerText和innerHTML属性

最新推荐文章于 2025-03-03 18:57:28 发布

原创最新推荐文章于 2025-03-03 18:57:28 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

56 篇文章

订阅专栏

本文将介绍innerText和innerHTML属性在网页开发中的使用，包括如何获取和修改元素的内容，以及它们之间的区别和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内容
的文本表示形式和HTML源代码，这两个属性是可读可写的
innerHTML也可以取代createElement,属于简单，粗放型，后果自负的创建

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试(innerText和innerHTML)</title>
    <script type="text/javascript">
        function TestOutput() {
            var myLink = document.getElementById("lnk");
            alert('innerText-->' + myLink.innerText);         //得到百度网站
            alert('innerHTML-->' + myLink.innerHTML); //得到百<font color="red">度</font>网站
        }
        function EditInnerText() {
            var myLink = document.getElementById("lnk");
            myLink.innerText = "凤凰网";
        }
        function EditInnerHTML() {
            var myLink = document.getElementById("lnk");
            myLink.innerHTML = "<font color='blue'>凤凰网</font>";
        }
        function dynamicButtonClick() {
            alert('我是动态创建的');
        }
        function CreateButton() {
            var div = document.getElementById("divMain");
            div.innerHTML = "<input type='button' value='单击我' onclick='dynamicButtonClick()' />";
        }
    </script>
</head>
<body>
    <a href="http://www.baidu.com" id="lnk">百<font color="red">度</font>网站</a>
    <input type ="button" value="测试" onclick="TestOutput()" />
    <input type="button"" value="修改InnerText" onclick="EditInnerText()" />
    <input type="button"" value="修改InnerHTML" onclick="EditInnerHTML()" />
    <div id="divMain"></div>
    <input type="button" value="动态添加按钮" onclick="CreateButton()" />
</body>
</html>