Languages
[Edit]
DE

JavaScript - was ist der Unterschied zwischen innerHTML und outerHTML?

3 points
Created by:
Nikki
7700

1. √úbersicht

Der Outer HTML  - Begriff in JavaScript beschreibt den HTML-Quellcode, der sich in einem Element (Inner HTML) befindet, das durch einen Element-Tag-Code mit allen Attributen begrenzt ist.

Der Unterschied zwischen innerHTML und outerHTML html:

  • innerHTML = HTML innerhalb des ausgew√§hlten Elements
  • outerHTML = HTML innerhalb des ausgew√§hlten Elements + HTML des ausgew√§hlten Elements

Unten befinden sich Beispiele:

HTML - Beispiel

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

innerHTML

<p>Hello world</p>

outerHTML

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

Eine andere Möglichkeit, dies zu betrachteb, ist mit der folgenden Beschreibung + Bild

  • innerHTML = Geschlossener Tag-Inhalt
  • outerHTML = Tag √∂ffnen¬†+ Geschlossener Tag-Inhalt + Tag schlie√üen
HTML tag construction
HTML-Tag-Konstruktion

Jetzt kann man es selbst mit 2 praktischen Codebeispielen testen.

2. Codebeispiel 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. Codebeispiel 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>

Zusammengef√ľhrte Fragen

  1. JavaScript - inner vs outer html
  2. JavaScript - innerHTML vs outerHTML
  3. JavaScript - wie benutzt man innerHTML und outerHTML?
Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join