innerHTML在JS中用法

最新推荐文章于 2024-05-10 10:18:38 发布
最新推荐文章于 2024-05-10 10:18:38 发布
阅读量1.7w 收藏 30
点赞数 3
分类专栏： 转载 学习-总结-转载 H5 Js
学习-总结-转载 同时被 3 个专栏收录
136 篇文章 0 订阅
订阅专栏
H5
127 篇文章 2 订阅
订阅专栏
Js
111 篇文章 1 订阅
订阅专栏

转载——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>


   

SSSkyCong
关注
  • 3
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript中innerHTML用法实例分析
10-24
主要介绍了Javascript中innerHTML用法,实例分析了实用innerHTML获取对应元素内容的使用技巧,需要的朋友可以参考下
关于在innerHTML中JS不执行的问题
03-28
这就是为什么在`innerHTML`中插入的JS代码不执行的原因。 为了解决这个问题，我们可以采用以下几种方法： 1. **使用`document.createElement`和`element.appendChild`**：这种方法创建和操作DOM元素是安全的，因为...
JavaScript中的innerHTML使用
qq_60115503的博客
04-17 6万+
innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法
js通过innerHTML添加元素点击事件
最新发布
可达鸭的博客
05-10 288
js往元素里动态添加一个按钮，并激活点击事件innerHTML
JavaScript之innerHTML和outerHTML，innerText和outerText
Karka_的博客
09-15 4511
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
javascript中的innerHTML是什么意思，怎么个用法？
热门推荐
奔跑的蜗牛
09-22 10万+
nnerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容
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; ...
javascript中innerText和innerHTML属性用法实例分析
10-24
主要介绍了javascript中innerText和innerHTML属性用法,实例分析了javascript中innerText和innerHTML属性的作用和相关的使用技巧,需要的朋友可以参考下
js innerHTML 改变div内容的方法
01-21
改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记。...下面我们来看一个用js的innerHTML来改变div值吧. 代码如下:<script type=”text/javascript
js中innerHTML与innerText的用法与区别
qq_45587146的博客
10-30 4631
在js中，innerHTML属获取性的是元素对象内包含html代码的内容，innerText属性只获得元素对象内的文本内容。下面通过代码演示讲解js中innerHTML与innerText的用法与区别。 首先创建一个html文件，html文件内，使用div创建一个模块，在div内，使用span标签创建一行测试的文字。 ...
js的innerHTML进行页面修改
qq_47959958的博客
03-10 1727
对于野路子出家的前端，今天算是开了眼。原来还有这种玩法—— 首先是html的body部分 <body> <script type="text/javascript" src="header.js "></script> <div> 这里是页面主体内容 <script type="text/javascript" src="${base}js/header.js "></script> </div&g
js中的innerHTML的作用
xiaosheng
10-06 1万+
js中常常用到innerHTML，其作用就是获取到标签里面的内容，同时也可以为标签添加内容 &lt;div&gt; &lt;p id="text"&gt;hello world&lt;/p&gt; &lt;/div&gt; &lt;script&gt; var oText = document.getElementById("text"); alert(oTe
JS中的innerHTML和innerText
胡振涛
03-04 1420
今天在进行DOM总结的时候遇到了innerHTML，由于在前几天看到了小伙伴总结了一篇关于innerHTML和innerText的博客总结，于是自己也开始搜查资料做一个小小的总结。 1.innerHTML可获取或设置指定dom元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。 获取元素的内容：element.innerHT...
关于innerHTML的用法,以及数据覆盖问题
m0_46642164的博客
02-21 3745
JavaScript innerHTML使用及数据覆盖问题的解决
第八章 innerHTML 属性
闽南土著
04-27 348
innerHTML 属性用于获取或替换 HTML 元素的内容。 语法: Object.innerHTML 注意: 1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。 2.注意书写，innerHTML区分大小写。 innerHTML javascript JavaScript是一种基于对象、事件驱动
07 JS-DOM之-innerHTML、innerText、textContent
路遇惊喜
11-29 680
value属性 innerHTML(可以识别标签) innerText <body> <input type="text" value="我是input的内容"/> <div id="box1"> <ul> <li>我用于测试innerHTML</li> </ul> </div> <div id="box2"> <ul>
innerHTML的基本用法
qq_35395612的博客
08-01 3万+
定义：innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 /*这串代码的var a的变量是我瞎写的。我忘记js咋样定义变量了，我是魔鬼我错了*/ &lt;p id="aa"&gt;...&lt;/p&gt; &lt;script&gt; var a=1; document.getElementById("aa").innerHTML=a; &lt;/scr...
JavaScript 中 innerHTML 属性
ONESTARの博客
08-20 1554
innerHTML 属性浏览器几乎都支持，但不是 DOM 标准的组成，主要用途： 获取文本内容 向标签里面设置内容（可以是HTML代码） 多与 div 或 span 标签配合使用 <html> <head> <title>oneStar</title> </head> <body> <span id...
在innerhtml中定义的方法如何使用
06-06
在 innerHTML 中定义的方法可以通过 JavaScript 中的事件监听器来调用。 例如，如果在 innerHTML 中定义了一个名为 "myFunction" 的函数： ``` <div id="myDiv" onclick="myFunction()">点击这里</div> ``` 可以在 JavaScript 中使用以下代码来定义和调用该函数： ``` // 定义 myFunction 函数 function myFunction() { alert("Hello World!"); } // 获取 myDiv 元素 var myDiv = document.getElementById("myDiv"); // 添加 click 事件监听器 myDiv.addEventListener("click", myFunction); ``` 当 `myDiv` 元素被点击时，`myFunction` 函数将被调用。注意，这里并没有直接在 innerHTML 中调用 `myFunction` 函数，而是通过事件监听器来调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值