js中innerHTML用法

最新推荐文章于 2022-04-17 21:14:15 发布
最新推荐文章于 2022-04-17 21:14:15 发布
阅读量1k 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rongwenbin/article/details/9860055
版权

用法：

<!--

<div id="test">
   <span style="color:red">test1</span> test2
</div-->

-->


在JS中可以使用：

test.innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

　　上例中的test.innerHTML的值也就是“style="color:red">test1 test2 ”。

test.innerText: 

　　从起始位置到终止位置的内容, 但它去除Html标签。

　　上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

　　除了包含innerHTML的全部内容外, 还包含对象标签本身。

　　上例中的text.outerHTML的值也就是id="test">style="color:red">test1 test2


完整示例：

<div id="test">
   <span style="color:red">test1</span> test2
</div>

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>



特别说明：

　　 innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<!--
<a href="javascript:alert(document.getElementByIdx_xx_xx_x('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

-------------------------------------------------------------------------------------------------------------------------------

<html>
<head></head>
<frameset frameborder="yes" frameborder="1" rows="40%,*">
<frame name="top" src="1.html">
<frame name="bottom" src="2.html">
</frameset>
</html>


<html>
<head>
<script language="javascript">
function init()
{ 

  
    var aaa = parent.window.frames[0].document.body.innerHTML;
    alert(aaa);
}
</script>
</head>
<body>
<p align="center">nothing</p>
<p align="center"><input type="button" οnclick="init()"; value="click"></p>
</body>
</html>

<html>
<center>汽车 房产女人</center>
</html>

-->
rongwenbin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中innerHTML与innerText的用法与区别
04-29
js中innerHTML与innerText的用法与区别js中innerHTML与innerText的用法与区别
innerHtml用法
weixin_30337251的博客
08-15 283
<html> <head> <script language="javascript"> function Test(){ var str=""; str+="Hello,"; str+="This is a Test!<br />"; str+="I Love...
innerHTML 用法
yihuei123的专栏
04-23 6613
用法：比如在中写了如下的代码：现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。例如top.innerHTML="";就可以在top对应的位置出现一个button了！爽吧，在公告前加javascript就行老，直接改HTML。。。function Test(){        var str="";        str+="Hel
innerHTML在JS中用法
进击的葱
12-13 1万+
转载——https://blog.csdn.net/qq_27918787/article/details/52628311 innerHTML在JS是双向功能：获取对象的内容  或  向对象插入内容； 如：&lt;div id="aa"&gt;这是内容&lt;/div&gt; ， 我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的...
javascript中的innerHTML是什么意思，怎么个用法？
热门推荐
奔跑的蜗牛
09-22 10万+
nnerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容
Javascript中innerHTML用法实例分析
10-24
主要介绍了Javascript中innerHTML用法,实例分析了实用innerHTML获取对应元素内容的使用技巧,需要的朋友可以参考下
javascript中innerText和innerHTML属性用法实例分析
10-24
主要介绍了javascript中innerText和innerHTML属性用法,实例分析了javascript中innerText和innerHTML属性的作用和相关的使用技巧,需要的朋友可以参考下
JavaScript中innerHTML，innerText，outerHTML的用法及区别
12-28
在JS中可以使用： test[removed]: 　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 　上例中的test[removed]的值也就是“<span xss=removed>test1</span> test2 ”。 test.innerText: 　从起始位置到...
javascript中innerHTML 获取或替换html内容的实现代码
10-15
在这篇文章中，我们将深入理解innerHTML的工作原理，并通过实例代码来展示其用法。 首先，innerHTML属性的工作方式如下： 1. **获取内容**：当你对一个元素调用innerHTML属性时，它会返回该元素内部的所有HTML内容...
[收藏]innerText，outerText，innerHTML，outerHTML
[ .::心 情 驿 站::. ]
03-19 2026
这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！ 例12 动态改变文本和Html DHtml举例12 body {font-family:"宋体";color="blue";
JavaScript中的innerHTML使用
qq_60115503的博客
04-17 6万+
innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法
javascript 中innerHTML的用法
美丽的大黄人
06-25 1万+
javascript 中innerHTML的用法 语法 Object.innerHTML = “HTML”;//设置其内容 var html = Object.innerHTML;//获取其内容 例： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
JS中 innerHTML
weixin_45148841的博客
06-25 1010
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如： <div id="aa">这是内容</div> ， 我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=‘这是被插入的内容’; 这样就能向id为abc的对象插入内容。 定义和用法 innerHTML 属性用于设
JavaScript中innerHTML的用法
Read_and_Write的博客
09-30 659
innerHTML在JS中具有双向功能：获取对象的内容 或 向对象插入内容； 获取对象的内容例如： &lt;script type="text/Javascript"&gt; function getInnerHTML(){     alert(document.getElementById("test").innerHTML); } &lt;/script&gt; &lt;/head&gt...
JavaScript innerHTML用法
hua_ban_yu的博客
12-27 2485
JavaScript innerHTML 属性用于设置标签内容，或返回开始和结束标签之间的 HTML内容。 设置内容： document.getElementById("demo").innerHTML = "hello world"; 获取标签内容： document.getElementById("demo").innerHTML
【JS】innerHtml用法
curry_zhao的博客
09-02 796
[javascript] view plain copy innerHtml用法            function Test(){           var str="";           str+="Hello,";           str+="This is a Test!";           str+="I Love you;
javascript innerhtml用法
最新发布
06-28
### 回答1： JavaScript中的innerHTML是一个属性，它允许您获取或设置HTML元素的内容。您可以使用innerHTML属性来动态更改HTML元素的内容，例如添加文本、插入HTML标记或替换元素的内容。使用innerHTML属性时要小心，因为它可以导致安全问题和性能问题。 ### 回答2： JavaScript中的innerHTML用于向HTML元素写入内容，它是一种处理Web页面内容的基本方法之一。innerHTML属性可读取或设置特定元素的HTML内容，方法是通过引用页面中的元素并通过JavaScript代码将它们再次“输出”到HTML文档中。 JS中的innerHTML操作非常的灵活，可以对页面上的任何元素进行添加、修改、删除等操作。使用较多的场景如以下几点： 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、付费专栏及课程。

余额充值