What is the difference between innerHTML and outerHTML?

Question

What is the difference between innerHTML and outerHTML?

Navigation

#1 by (5 votes)
#2 by (1 votes)

0

I would like to know the difference between innerHTML , outerHTML as well as innerText and outerText within javascript

javascript

asked by Pachi 26.12.2017 в 07:25

source

2 answers

First character of string c ++ [closed] SQL does not work, where [closed]

score 5 · Answer 1

Difference between innerHTML and outerHTML

innerHTML returns the text contained in the html tags.

outerHTML returns the text contained in the html tags and the tags themselves.

Example

<body>
		
<span id="span">soy un span</span>   

<script>
    var valor = document.getElementById("span");
    alert(valor.innerHTML); //Muestra "soy un span"
    alert(valor.outerHTML); //Muestra "<span id="span">soy un span</span>"
</script>
</body>

Difference between innerText and outerText

innerText returns the text found in the html tags.

outerText returns the text contained in the tags including the tags.

What is the difference between innerHTML and innerText?

innerText is interpreted as plain text while innerHTML is interpreted in html format, so that it is clear to you I will give you this example:

Example

<head>
<script type="text/javascript">
<!--
function Process(val){
    var obj = document.getElementById("div_1");
     if(val==1){
         obj.innerText = "<h4 style='color:blue;'>Algún Texto</h4>";
     }else{
         obj.innerHTML = "<h4 style='color:blue;'>Algún Texto</h4>";
     }
}
//-->
</script>
</head>
<body class="body">
    <div id="div_1">
    </div>
    <form id="form1" action="" onsubmit="">
        <input type="text" name="t1"/>
    	  <input type="button" value="innerText" onclick="Process(1)"/>
        <input type="button" value="innerHTML" onclick="Process(2)"/>
    </form>
</body>

score 1 · Answer 2

Let's put the following HTML code:

<div id="uno"><strong>Esto</strong> es un <a href="/">Ejemplo</a></div>

innerHTML of the element #id would return the html inside of the tag:
```
<strong>Esto</strong> es un <a href="/">Ejemplo</a>
```

outerHTML of the same one would return the complete HTML of the element:

<div id="uno"><strong>Esto</strong> es un <a href="/">Ejemplo</a></div>

innerText would return the / text / inner element:
```
Esto es un ejemplo
```
outerText is not a standard attribute, but it would usually return the inside text (such as innerText). The difference is that, if you assign something, it will replace the entire element instead of just its content.

I hope it has helped you.