javascript中的innerHTML是什么意思,怎么个用法?

转自:https://blog.csdn.net/qq_27918787/article/details/52628311

innerHTML在JS是双向功能:获取对象的内容  或  向对象插入内容;
如:<div id="aa">这是内容</div> ,
我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容;
也可以对某对象插入内容,如  document.getElementById('abc').innerHTML='这是被插入的内容';   
这样就能向id为abc的对象插入内容。

定义和用法
 
innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。
语法
 
    Object.innerHTML = "HTML";// 设置
    var html = Object.innerHTML;// 获取
 
例子 1
 
获取段落p的 innerHTML(html内容)
 
    <html>
    <head>
    <script type="text/javascript">
    function getInnerHTML(){
        alert(document.getElementById("test").innerHTML);
    }
    </script>
    </head><body>
    <p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
    <input type="button" onclick="getInnerHTML()" value="点击" />
    </body>
    </html>
 
例子 2
 
设置段落p的 innerHTML(html内容)
 
    <html>
    <head>
    <script type="text/javascript">
    function setInnerHTML(){
        document.getElementById("test").innerHTML = "<strong>设置标签的html内容</strong>";
    }
    </script>
    </head><body>
    <p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
    <input type="button" onclick="setInnerHTML()" value="点击" />
    </body>
    </html>

 

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScriptinnerHTML是一个属性,它允许您获取或设置HTML元素的内容。您可以使用innerHTML属性来动态更改HTML元素的内容,例如添加文本、插入HTML标记或替换元素的内容。使用innerHTML属性时要小心,因为它可以导致安全问题和性能问题。 ### 回答2: JavaScriptinnerHTML用于向HTML元素写入内容,它是一种处理Web页面内容的基本方法之一。innerHTML属性可读取或设置特定元素的HTML内容,方法是通过引用页面的元素并通过JavaScript代码将它们再次“输出”到HTML文档JSinnerHTML操作非常的灵活,可以对页面上的任何元素进行添加、修改、删除等操作。使用较多的场景如以下几点: 1.添加元素:将元素添加到网页innerHTML的一个主要用途。可以使用JavaScript代码动态地创建某个元素,如<div>或<span>等,然后使用innerHTML属性将它们添加到网页的一个容器元素。 2.修改元素:使用innerHTML可以修改指定元素的内容。可以修改某个元素的文本、添加或删除HTML代码等。 3.删除元素:使用innerHTML也可以删除某个元素。只需将元素的innerHTML属性设置为空即可删除该元素。 4.动态创建HTML代码:如果需要根据某些条件来动态地创建HTML代码,则可以使用innerHTML属性。例如,可以将文本插入到页面的某个元素,使用不同于HTML的标签样式等等。 要使用innerHTML,需通过getElementById或其他取得元素节点的方法来取得需要操作的元素。然后,使用innerHTML属性对这个元素进行修改、添加、删除等操作。需要注意的是,innerHTML属性不能用于一些自闭合标签,如<input>和<img>。在这种情况下,可以使用setAttribute方法。 总之,使用innerHTML是动态生成HTML的强大方式之一,使用它可以轻松地修改页面元素,从而实现对网页的制作和后期维护和优化。 ### 回答3: Javascript innerHTML是一种关键性的DOM属性,它被用于在HTML文档的特定元素显示或改变内容。如同它的名字意味的那样,innerHTML设置或返回特定HTML元素的内容。因为innerHTML是DOM属性,所以可以使用Javascript来修改HTML文档的内容,并且可以使用innerHTML来操作整个文档或者只是特定的元素。innerHTML用法如下: 1. 获取元素的inner HTML内容:可以使用innerHTML属性来获取元素的内容,并且可以将该内容存储到一个变量以便稍后使用。 例如在JavaScript使用document.getElementById方法获取一个元素并且获取其内容: ``` var content = document.getElementById('example').innerHTML; ``` 2. 设置元素的inner HTML内容:可以使用innerHTML属性来设置HTML元素的内容,可以使用+=操作符将HTML标签追加到HTML。例如: ``` var content = document.getElementById('example'); content.innerHTML = "<p> New content </p>"; content.innerHTML += "<p> More new content </p>"; ``` 3. 创建新元素并添加到节点的inner HTML:可以使用innerHTML属性来创建新的元素并将其添加到现有的HTML元素。例如: ``` var content = document.getElementById('example'); content.innerHTML += "<p> <strong> Some title </strong><br> Some content </p>"; ``` 4. 替换HTML元素的内容:可以使用innerHTML属性来替换现有的HTML元素的内容。例如: ``` var content = document.getElementById('example'); content.innerHTML = "<p> New content </p>"; ``` 需要注意的是,在实际的应用过程innerHTML属性的值必须是有效的HTML代码。此外,必须小心不要使用innerHTML属性来插入或更改敏感数据,因为它可以被用于注入恶意的代码。最好是使用服务器端语言来处理敏感数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值