innerHTML,outerHTML,innerText,outerText的用法及区别解析

<p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>这是一个层</span></div>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">
<script language="javascript">
function changeb(obj)
{
 obj.outerHTML = "<input type='text' value='设置对象内的HTML，包括标签' style='width:200px;'></input>"
}
function changea(obj)
{
 obj.innerHTML = "<b>设置对象内的HTML</b>"
}
</script>
<br><br>
innerHTML获取标签内的HTML<br>
outerHTML获取标签及标签内的HTML<br>
innerTEXT和outerTEXT都是获取标签内的文本，相同。<br>
<br><br>
<div id="div1" style="background-color:#ff9966;border:1px #ff0000 dashed;">这是一个层</div>
<br>
<input name="innerHTML1" value="innerHTML" type="button" OnClick="changea(div1)">
<input name="outerHTML1" value="outerHTML" type="button" OnClick="changeb(div1)">
<input name="innerText1" value="innerText" type="button" OnClick="div1.innerText='使用innerText替换文本'">
<input name="outerText1" value="outerText" type="button" OnClick="div1.outerText='使用outerText会连带标签一起替换成目标文本，层也替换掉了'">
<br>
<p>
innerHTML设置标签内的HTML<br>
outerHTML设置标签及标签内的HTML<br>
innerTEXT设置签内的文本<br>
innerTEXT设置签内的文本，包括标签一起替换。<br>
</p>

innerHTML 设置或获取位于对象起始和结束标签内的 HTML <br>
outerHTML 设置或获取对象及其内容的 HTML 形式 <br>
innerText 设置或获取位于对象起始和结束标签内的文本 <br>
outerText 设置(包括标签)或获取(不包括标签)对象的文本 <br><br>

赞 (0)

相关推荐

  • JavaScript中innerHTML，innerText，outerHTML的用法及区别

    不废话了,请看下文示例介绍. 用法: <div id="test"> <span style="color:red">test1</span> test2 </div> 在JS中可以使用: test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">

  • javascript innerHTML、outerHTML、innerText、outerText的区别

    javascript innerHTML、outerHTML、innerText、outerText的区别

    1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2.示例 <html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";

  • innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解

    innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. innerText属性和outerText属性在读取元素节点的文本内容时,得到的值是不一样的.它们的不同之处在于设置一个节点的文本属性时,outerText属性会使得原来的元素节点被文本节点替换掉.注意,innerText是非标准属性,Firefox不支持. 1.innerText受CSS影响,t

  • innerHTML，outerHTML,innerTEXT三者之间的区别

    innerHTML，outerHTML,innerTEXT三者之间的区别

    与innerHTML不同,outerHTML包括整个标签,而不仅限于标签内部的内容.对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来:

  • innerHTML,outerHTML,innerText,outerText的用法及区别解析

    <p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>这是一个层</span></div> <input name="innerHTML" value="innerHTML" type="button" OnClick="

  • python中数组array和列表list的基本用法及区别解析

    目录 1. 定义 2. 两者不同点 3. 两者相同点 4. 基本用法 4.1 数组array的基本用法 4.2 列表list的基本用法 1. 定义 (1)数组array: 是同类型数据的有限集合(2)列表list: 是一系列按特定顺序排列的元素组成,可以将任何数据放入列表,且其中元素之间没有任何关系. 2. 两者不同点 (0)列表是直接可以在python中使用的:数组是python中numpy库的,所以需要import numpy后,才能使用:(1)列表中的元素数据类型可以不一样:数据中的元素数

  • jQuery中bind,live,delegate与one方法的用法及区别解析

    bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象. .bind(eventType[, evnetData], Handler(eventObject)) 其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事件类型时用空格分隔各个类型:eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函数,eventObject表示事

  • 浅谈js中的attributes和Attribute的用法与区别

    一:Attribute的几种用法和含义(attributes和Attribute都是用来操作属性的) getAttribute:获取某一个属性的值: setAttribute:建立一个属性,并同时给属性捆绑一个值: createAttribute:仅建立一个属性: removeAttribute:删除一个属性: getAttributeNode:获取一个节点作为对象: setAttributeNode:建立一个节点: removeAttributeNode:删除一个节点: 1.getAttrib

  • JavaScript setTimeout和setInterval的用法与区别详解

    JavaScript setTimeout和setInterval的用法与区别详解

    目录 I. 总述 II. setTimeout()函数 III. setInterval()函数 IV. 新年倒计时案例 总结 I. 总述 首先,setTimeout()和setInterval()函数是JavaScript中两个很重要的关于"时间的函数",因此,我们在学习JavaScript的过程中,一定要对这两个函数有一个深入的学习,它们两个函数也是经常被使用! 其中,如果分别用一句话来概括这两个函数,那么应该是这样的: setTimeout(): 该函数能够按照设定的时间值延迟执

  • JSP中Servlet的Request与Response的用法与区别

    JSP中Servlet的Request与Response的用法与区别 简介:Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要获取客户机提交过来的数据,只需要找request对象就行了.要向客户机输出数据,只需要找response对象就行了. 一,Request Request代表请求对象,其中封装了对请求中具有请求行.请求头.实体内容的操作的方法

  • Linux Shell中三种引号的用法及区别

    Linux Shell中有三种引号,分别为双引号(" ").单引号(' ')以及反引号(` `). 其中双引号对字符串中出现的$.''.`和\进行替换:单引号不进行替换,将字符串中所有字符作为普通字符输出,而反引号中字符串作为shell命令执行,并返回执行结果.具体含义如下: 双引号(" "):在双引号中,除了$, '', `和\以外所有的字符都解释成字符本身. 单引号(' '):在单引号中所有的字符包括特殊字符($,'',`和\)都将解释成字符本身而成为普通字符.

  • php中静态类与静态变量用法的区别分析

    本文实例分析了php中静态类与静态变量用法的区别.分享给大家供大家参考.具体分析如下: static是定义一个静态对象或静态变量,关于static 定义的变量或类方法有什么特性我们看完本文章的相关实例后就见分晓了. 1. 创建对象$object = new Class(),然后使用"->"调用:$object->attribute/function,前提是该变量/方法可访问. 2. 直接调用类方法/变量:class::attribute/function,无论是静态/非静态

随机推荐