Beispiel:JS-createElement-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">
 <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
 <title>Website-Builder mit createElement()</title>
 <style>
   form { 
     background-color: #eee; 
     padding: 1em;

display: grid; grid-template-columns: 12em 18em; gap: 1em;

button { width: min-content; } 

   }
   div > h1, h2, h3 { 
     background-color:	#fffbf0;
     border-radius: 0 .5em .5em 0; 
     padding: 0 2em;
   }
   div > h1 { 
     border-bottom: medium solid red;

border-left: medium solid red; 

   }
   h2 { 
     border-bottom: thin solid red;

border-left: medium solid red; 

   }

aside { border: thin solid; border-radius: 1em; padding: 2em 1em; color: navy; background: powderBlue; float:right; margin-left: 1em; } 

 </style>

</head>

<body>

Primitiver Website-Builder mit createElement()

Erzeuge neue Elemente und hänge sie ins DOM.

<form name="Formular" action=""> <label for="elementType">Wähle ein HTML-Element:</label> <select id="elementType"> 

       <option value="h1">Überschrift 1</option>
       <option value="h2">Überschrift 2</option>
       <option value="h3">Überschrift 3</option>
       <option value="p">Textabsatz</option>

<option value="button">Button</option> <option value="aside">aside</option> 

       <option value="hr">Trennlinie</option>
     </select>
     <label for="content">Elementinhalt hinzufügen</label>

<input type="text" id="content" size="50"> 

     <button type="button" id="add">Hinzufügen</button>
   </form>

<script>

'use strict'; document.addEventListener('DOMContentLoaded', function () { 

 const form = document.querySelector('form');
 const addButton = document.querySelector('#add');
 const elementType = document.querySelector('#elementType');
 const contentInput = document.querySelector('#content');
 const resultContainer = '#result';

 addButton.addEventListener('click', function () {
   const element = elementType.value; 
   const content = contentInput.value.trim(); 

   if (content ===  && element !== 'hr') {
     alert('Bitte einen Inhalt für das Element eingeben.');
     return;
   }

   createElement(resultContainer, element, content);

   // Eingabefeld wieder leeren
   contentInput.value = ;
 });
 
 // Helfer-Funktion, um HTML-Elemente zu erzeugen
 function createElement(parent, elem, content, attributes = {}) {
   const container = document.querySelector(parent);
   
   if (!container) {
     console.error(`Parent element "${parent}" not found.`);
     return;
   }

   if (typeof elem !== 'string') {
     console.error(`Invalid element type: ${elem}`);
     return;
   }

   const newElm = document.createElement(elem);
   newElm.textContent = content;

   // Apply optional attributes
   for (let [key, value] of Object.entries(attributes)) {
     newElm.setAttribute(key, value);
   }

   container.appendChild(newElm);
 }

}); </script> </body> </html>

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