JavaScript DOM之Element对象属性innerHTML、innerText和outerHTML三者的区别

三大属性

属性	描述
innerHTML	设置或返回元素内部的HTML结构与内容
innerText	设置或返回元素内部的文本节点
outerHTML	设置或返回自身HTML结构与内容

innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记。innerText属性只能声明元素包含的文本内容，即使指定的是HTML文本，他也只会输出HTML文本的字符形式。outerHTML和前者类似，但是唯一不同的是它包含自身的开始标记和结束标记，最终替换的是整个目标节点，而不是目标内部节点结构。

案例代码

属性	说明	结果展示	HTML代码
innerHTML	插入格式	li[1].innerHTML = '<li class="liElement">4</li>'	<ul id="ulElement"> <li class="liElement">1</li> <li class="liElement">2</li> <li class="liElement">3</li> </ul>
innerHTML	变化	结果结构
innerText	插入格式	li[1].innerText = '<li class="liElement">4</li>';
innerText	变化	结果结构
outerHTML	插入格式	li[1].outerHTML = '<li class="liElement">2</li>';
outerHTML	变化	结果结构

JavaScript DOM之Element对象属性innerHTML、innerText和outerHTML三者的区别相关推荐

JS中innerHTML,innerText,outHTML的用法及区别
一张图解释: 对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来: 文字解释: innerHT ...
JavaScript 中的Element对象
1.Element节点概述 Element对象对应网页的HTML标签元素.每一个HTML标签元素,在DOM树上都会转化为Element节点对象.元素节点的nodeType属性都是1,但是不同的Elem ...
javascript中的array对象属性及方法
Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...
innerHTML、innerText、outerHTML、outerText区别
1.区别: (1) innerHTML 设置或获取位于对象起始和结束标签内的 HTML,例子: <div id="div1">hello world</div&g ...
JavaScript 使用变量访问对象属性
中括号操作符的另一个使用方式是用变量来访问一个属性.当你需要遍历对象的属性列表或查表时,这种方式极为有用. 这有一个使用变量来访问属性的例子: var someProp = "propNam ...
JavaScript: 使用delete删除对象属性
原文: https://stackoverflow.com/questions/208105/how-do-i-remove-a-property-from-a-javascript-object
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
JavaScript 教程「9」：DOM 元素获取、属性修改
什么是 Web API Web API 是指网页服务器或者网页浏览器的应用程序接口.简单来讲,就是我们在编写 JavaScript 代码时,可以通过 Web API 来操作 HTML 网页和浏览器. ...
innerHTML,innerText是什么意思?怎么使用？
innerHTML,innerText是什么意思?怎么使用? innerHTML:获取标签的内容(包括子元素),字符 innerText:获取标签的文字内容,字符一.属性的操作需要获取的属性 in ...

JavaScript DOM之Element对象属性innerHTML、innerText和outerHTML三者的区别

三大属性

案例代码

JavaScript DOM之Element对象属性innerHTML、innerText和outerHTML三者的区别相关推荐

最新文章

热门文章