Beispiel:JS-element-textContent-2.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">
 <title>textContent vs innerText vs innerHTML</title>
 <style>
   .hidden { display: none; }
   .output { margin-top: 1em; font-family: monospace; }
 </style>

</head> <body>

Hallo Welt!

<button data-action="textContent">Zeige textContent</button> <button data-action="innerText">Zeige innerText</button> <button data-action="innerHTML">Zeige innerHTML</button>

<script> 

 const testElement = document.getElementById("testElement");
 const output = document.getElementById("output");

 document.body.addEventListener("click", function (event) {
   if (!event.target.dataset.action) return;

   let result = "";
   switch (event.target.dataset.action) {
     case "textContent":
       result = "textContent: " + testElement.textContent;
       break;
     case "innerText":
       result = "innerText: " + testElement.innerText;
       break;
     case "innerHTML":
       result = "innerHTML: " + testElement.innerHTML;
       break;
   }
   output.textContent = result;
 });

</script>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-element-textContent-2.html&oldid=100879“