Inner and outer HTML -output?

JavaScript
1

Hello!

<!DOCTYPE html>
 <html>
 <body>
 <p>An unordered list:</p>
 <ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
 </ul>
 <p>Click the button to display the innerHTML of the second li element (index 1).</p>
 <button onclick="myFunction()">Try it</button>
 <p id="demo"></p>
 <script>
 function myFunction() {
 var x = document.getElementsByTagName("LI");
 document.getElementById("demo").innerHTML = x[0].outerHTML;
 }
 </script>
 </body>
 </html>

I thought , in first example I should get output: <p><li>Coffee</li></p>, shouldn’t I? Many thanks!!!

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

3

Please, I expected the whole element in the first case, as I wrote outerHTML…!
Please, can someone help?
Many thanks!

4

The first li element in the list is Coffee, and the second li element is Tea. That is why you get Tea as the second li element.

The change you’ve made to the code from the original results in the zeroth element being retrieved from the array. In JavaScript (and most other languages), arrays are indexed starting from zero.

5

element.innerHTML will get only what is contained within the designated element:

<span id="demo"><p>This is a paragraph</p></span>

… will return <p>This is a paragraph</p>

element.outerHTML will get the designated element AND what is contained within:

<span id="demo"><p>This is a paragraph</p></span>

… will return <span id="demo"><p>This is a paragraph</p></span>

And the button you wrote claims to get “index 1”, but you use index 0 in the function.

:slight_smile:

6

mkjs still hasn’t learned how to format code blocks.
After Discourse stripped out the HTML tags what was displayed looked to be asking for more than it was.

7

Hey, problem is that I get outputted innerHTML in both cases, in the case I write innerHTML and outerHTML…I supposed in the first code I would get outerHTML as output, but I get innterHTML (just like inthe second example, but there I do expect it, in first code not!)

I have 2 pastebin codefirst with inner and second with outer…

8

outerHTML is useful when you have an actual element that contains the content.

In this particular case though, there is no outer HTML element because document.getElementsByTagName results in an array instead.

Sidenote: The others have been talking about how you haven’t been formatting your code. You need to place three backticks (```) before and after your code, so that it it is handled properly by the forum.

For example:

Code with no backticks gets wrongly interpreted by the forum, as follows:

An unordered list:

  • Coffee
  • Tea
  • Milk

When the code correctly has the three backticks before and after it, it gets formatted properly and it’s easier for people to understand what you’re talking about.

<html>
 <body>
 <p>An unordered list:</p>
 <ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
 </ul>
9

In mkjs’ defense, the variable x was indexed to the first element.

Shouldn’t that make the outerHTML <li>Coffee</li>?

10

Yes, right that is the question, I expected right what U wrote in FIRST CODE from pastebine (first link with code).

I thought first sth is wrong with my possibly too old browser…(…?..)

11 
''''
	
	<!DOCTYPE html><html><body> <p>An unordered list:</p><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul> <p>Click the button to display the innerHTML of the second li element (index 1).</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script>function myFunction() {    var x = document.getElementsByTagName("LI");    document.getElementById("demo").innerHTML = x[0].innerHTML;}</script> </body></html>

‘’‘’

‘’’

12

‘’‘’

	<!DOCTYPE html><html><body> <p>An unordered list:</p><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul> <p>Click the button to display the innerHTML of the second li element (index 1).</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script>function myFunction() {    var x = document.getElementsByTagName("LI");    document.getElementById("demo").innerHTML = x[0].innerHTML;}</script> </body></html>
	''''
13

‘’’

An unordered list:

  • Coffee
  • Tea
  • Milk

Click the button to display the innerHTML of the second li element (index 1).

Try it


‘’’

14 
Backticks, the key to the left of 1 - the shift of which is the tilde ~
15

‘’’

	<!DOCTYPE html><html><body> <p>An unordered list:</p><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul> <p>Click the button to display the innerHTML of the second li element (index 1).</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script>function myFunction() {    var x = document.getElementsByTagName("LI");    document.getElementById("demo").innerHTML = x[0].innerHTML;}</script> </body></html>
	'''
16

¸¸
¸

An unordered list:

  • Coffee
  • Tea
  • Milk

Click the button to display the innerHTML of the second li element (index 1).

Try it


¸¸

17

Three backticks on the same line, then a new line, then code, then new line, then three backticks.

18

¨¨

An unordered list:

  • Coffee
  • Tea
  • Milk

Click the button to display the innerHTML of the second li element (index 1).

Try it


¨¨

19

It’s got to be your keyboard… I’m not seeing any backticks.

The same thing can be done by highlighting all code and clicking on the button in the editor that looks like </>

20

¸¸¸

	<!DOCTYPE html><html><body> <p>An unordered list:</p><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul> <p>Click the button to display the innerHTML of the second li element (index 1).</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script>function myFunction() {    var x = document.getElementsByTagName("LI");    document.getElementById("demo").innerHTML = x[0].innerHTML;}</script> </body></html>

¸¸

21

¸¸¸

	<!DOCTYPE html><html><body> <p>An unordered list:</p><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul> <p>Click the button to display the innerHTML of the second li element (index 1).</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script>function myFunction() {    var x = document.getElementsByTagName("LI");    document.getElementById("demo").innerHTML = x[0].innerHTML;}</script> </body></html>

¸