Languages
[Edit]
PL

JavaScript - jaka jest ró┼╝nica mi─Ödzy innerHTML, a outerHTML?

3 points
Created by:
Sylwia
1340

1. Omówienie

Outer HTML termin┬áw JavaScript opisuje kod ┼║r├│d┼éowy html, kt├│ry znajduje si─Ö wewn─ůtrz jakiego┼Ť elementu (wewn─Ötrzny HTML), ograniczony kodem znacznika elementu ze wszystkimi atrybutami.

Różnice pomiędzy innerHTML i outerHTML html:

  • innerHTML = HTML wewn─ůtrz wybranego elementu
  • outerHTML = HTML wewn─ůtrz wybranego elementu + HTML wybranego elementu

 

Spójrzmy na poniższy przykład.

HTML przykład

<div id="element">
  <p>Hello world</p>
</div>

innerHTML

<p>Hello world</p>

outerHTML

<div id="element">
  <p>Hello world</p>
</div>

 

Innym sposobem spojrzenia na to jest poni┼╝szy opis + obraz

  • innerHTML =┬áZawarto┼Ť─ç za┼é─ůczonego tagu
  • outerHTML = Tag otwieraj─ůcy + zawarto┼Ť─ç za┼é─ůczonego tagu + tag zamykaj─ůcy
HTML tag construction
HTML konstrukcja tag├│w

 

Teraz mo┼╝emy to przetestowa─ç samodzielnie, korzystaj─ůc z poni┼╝szych 2 praktycznych przyk┼éad├│w kodu.

2. Przykład kodu 1

// ONLINE-RUNNER:browser;

<html>
<body>
  <div id="element">
    <p>Hello world</p>
  </div>
  <script>

    var element = document.getElementById('element');

    console.log('innerHTML:');
    console.log(element.innerHTML);

    console.log('outerHTML:');
    console.log(element.outerHTML);

  </script>
</body>
</html>

3. Przykład kodu 2

// ONLINE-RUNNER:browser;

<html>
<body>
  <div id="element">
    <h3>Head 1</h3>
    <p>Some apostrophe text...</p>
    <h3>Head 2</h3>
    <p>Some apostrophe text...</p>
  </div>
  <script>

    var element = document.getElementById('element');

    console.log('innerHTML:');
    console.log(element.innerHTML);

    console.log('outerHTML:');
    console.log(element.outerHTML);

  </script>
</body>
</html>

Podobne pytania

  1. JavaScript - inner vs outer html
  2. JavaScript - innerHTML vs outerHTML
  3. JavaScript - jak używać innerHTML i outerHTML?
Hey ­čĹő
Would you like to know what we do?
  • Dirask is online IT community for professionals and hobbyist to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.