Beispiel:JS-Element-outerHTML.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>outerHTML</title>
  <script>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('show').addEventListener('click', showHTMLNode);
  document.getElementById('button').addEventListener('click', changeHTMLNode);
});

function showHTMLNode() { 
  let absatz = document.getElementsByTagName('p')[0].outerHTML;
  document.getElementById('display').textContent = encodeURI(absatz);
}

function changeHTMLNode() {
  var neu = "<p class='absatz'>neuer <strong>starker</strong> Text</p>";
  document.getElementById('absatz').outerHTML = neu;
}


</script>
</head>
 
<body>
  <h1>outerHTML</h1>
 
  <main>
<p id="absatz">Ein ganz einfacher Absatz</p>
<p>
	HTML-Code 
	<button id="show">URI-Codieren</button> 
    <button id="button">Tauschen</button>
</p>
<p>
	<label>URI codiert: 
    	<output id="display"></output>
    </label>
</p>

  </main>
</body>
</html>