javascript innerText和innerHTML属性

本文将介绍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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值