Wie kann ich einen div auf Knopfdruck erstellen?

Ich habe schon oft bei Projekten wie zb. To-do Liste das Problem gehabt dass ich auf Knopfdruck einen ganz neuen div, den ich noch nicht in meinem HTML Code definiert habe ertsllen muss. Wie kann ich dieses Problem lösen? Danke im Vorraus😊.

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Lezurex

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, JavaScript

10.08.2021, 01:44

Hier ein kleines Beispiel. Vor dem Anfügen an die Liste kannst du natürlich auch noch alle anderen beliebigen Eigenschaften des neuen Elementes ändern.

Hier das ganze noch als Github Gist: https://gist.github.com/Lezurex/aa4dd57bdcbbed5736ac02474611da27

Mehr dazu ebenfalls hier: https://www.w3schools.com/js/js_htmldom_nodes.asp

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Listeneinträge mit JS</title>
</head>
<body>
    <!--In diese Liste werden neue Elemente hinzugefügt-->
    <ul id="liste">
        <li>Erster Eintrag</li>
    </ul>
    <!--Button als Auslöser-->
    <button id="new-entry">Klick mich!</buton>

    <script>
        // Button und Liste in Variablen speichern
        let btn = document.getElementById("new-entry");
        let list = document.getElementById("liste");


        // Ein Click-Event für den Button registrieren
        btn.addEventListener("click", () => {
            // Ein neues li-Element erstellen und in eine Variable speichern
            let newEntry = document.createElement("li");
            // Den Inhalt des Elementes setzen
            newEntry.innerHTML = "Hallo hier neuer Eintrag!";
            // Das Element der Liste hinzufügen
            list.appendChild(newEntry);
        })
    </script>
</body>
</html>

Woher ich das weiß:Berufserfahrung – Informatiker Applikationsentwicklung

SamanthaI

10.08.2021, 01:33

Mit Javascript sollte das gehen

Also ein Element erstellt man mit:

var div = document.createElement("div");

Dann kannst du auch weitere Elemente (bzw hier das Element elem) erstellen und an das div als Kind anhängen mit:

// TODO Element elem ist noch nicht erstellt

div.appendChild(elem);

Das ins HTML Dokument einfügen kannst du auf unterschiedliche Weise. Das kommt auf deinen Code an.

DerEinsiedler

10.08.2021, 01:29

Naja, das dürfte sehr stark davon abhängen, mit welchen Werkzeugen Du arbeitest...

babaking2006

Beitragsersteller

10.08.2021, 01:33

mit JavaScript

DerEinsiedler

10.08.2021, 01:34

@babaking2006

Aber mit welchem Editor schreibst du das?

Da müssen docjh die DIVs generiert werden...

babaking2006

Beitragsersteller

10.08.2021, 01:40

@DerEinsiedler

mit VS Code

MrAmazing2

10.08.2021, 04:38

@DerEinsiedler

What?

Er will die Divs mit JavaScript generieren, das hat rein garnichts mit seinem Editor zu tun.

Ähnliche Beiträge

Wie kann ich den Fehler bei meiner To-Do-Liste (mit HTML und JavaScript) beheben?

Mein Ziel ist es, eine To-Do-Liste mit HTML, CSS und Javascript zu erstellen. Eine Person gibt ihr To-Do ein und kann es mit ENTER oder mit dem "Bestätigen"-Button hinzufügen. Gleichzeitig wird auch die Leiste, wo man dies eingibt, wieder geleert.

Wenn man nun dort etwas eingibt und bestätigt, wird die Eingabeleiste geleert, aber das To-Do fügt sich nicht hinzu. Oder besser gesagt: Es erscheint nur für ein paar Millisekunden.

Wie kann ich den Fehler beheben (ich bin Anfänger)?

Hier der Code von der index.html-Datei:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo Liste</title>
    <style>
      #input {
        margin: 50px;
        text-align: center;
      }
    </style>
    <script>
      function addTodo() {
        todolist.innerHTML += `${todofield.value}`;
        todofield.value= '';
      }
    </script>
  </head>
  <body>
    <form onsubmit="addTodo()">
      <div id="input">
        <input type="text" id="todofield">
        <button type="submit" for="todofield">Bestätigen</button>
      </div>
    </form>
    <div id="todolist"></div>
  </body>
</html>

Danke für eure Hilfe.

...zum Beitrag

Wie erstelle ich eine To-Do-Liste mit JavaScript?

Hallo,

wie erstelle ich mit Java Script eine To-Do-Liste? (aber ohne localStorage)

...zum Beitrag

MAILTO in JavaScript?

Hallo,

Ich möchte gerne eine Email verschicken, also nach Knopfdruck(Buttonclick) soll das Mailprogramm geöffnet werden. Es soll bereits der Empfänger, der Betreff und ein Teil des Bodys bzw. des Inhaltes gefüllt werden. Ich habe die Mailto- Funktion gefunden in Html. Aber diese ist mir eine zu schlechte Lösung da ich dort alles bereits im html Code einfügen muss. Hat da jemand eine gute Lösung?

...zum Beitrag

HTML - div verschwinden lassen nach Zeit?

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

...zum Beitrag

Eure to do List für den Sommer?

Hallo,😊

Mich würde interessieren, was eure persönliche to do List für den Sommer ist. Welche Aktionen, Ausflüge, Ziele, usw. habt ihr euch für den Sommer gesetzt und was wollt ihr spezifisch erleben?😊

Wer weiß, vielleicht findet man Inspirationen bei den anderen Antworten 😂

...zum Beitrag

div-code aus einer text-datei auslesen und einfügen?

Hallo Leute,

Ich habe eine Website, welche in bestimmte Bereiche aufgeteilt ist. Diese Bereiche enthalten im Code auch gewisse Tags, wie zum Beispiel p oder span. Ich möchte aber, das man diese Inhalte bearbeiten kann ohne, dass man direkt die Html-Datei der Seite bearbeitet. Ich hatte mir das so vorgestellt, dass der Code, der in diesen Bereichen vorhanden ist, in einer anderen Datei gespeichert wird und die Haupt-Html-Datei liest dann diese Datei aus und nimmt den Inhalt und fügt ihn in die Bereiche ein. Ich bin offen für Javascript oä.

Danke im Voraus

...zum Beitrag

Über PHP HTML Quellcode auslesen und in Variable speichern?

Hallo,

Kennt jemand eine Möglichkeit wie ich mit PHP einen bestimmten Teil HTML Quellcode aus der gerade geöffneten Seite/oder generell aus einer Datei auslesen kann und diesen dann als Text in einer ganz normalen PHP Variablen speichern kann.

Mit bestimmten Teil meine ich zum Beispiel alles was in einem Element wie einem div mit einer bestimmten id steht.

Zum Beispiel dieser HTML Code:

<body>
  <div id="Div1">
      <h1> Nicht dieses Div </h1>
  </div>

  <div id="Div2">
      <h1> Dieses Div </h1>
  </div>

  <div id="Div3">
      <h1> Nicht dieses Div </h1>
  </div>
</body>

Wenn ich dann den Inhalt von Div2 in eine PHP Variable schreiben wil soll in der Variable: "<h1> Dieses Div </h1>" stehen.

Ich hoffe meine Frage ist verständlich und jemand kennt eine Lösung.

Vielen Dank im voraus :D

...zum Beitrag

Wie kann ich eine dynamische HTML-Tabelle persistent erweitern?

Hey liebe GuteFrageNet-Community,

ich bastle gerade an einer Website, in der man eine Tabelle per Knopfdruck erweitern kann. Dies funktioniert soweit auch sehr gut, aber es wird nicht gespeichert, bzw. nur im Cache bei demjenigen, der den Knopfdruck ausgeführt und etwas hineingeschrieben hat.

Gibt es eine Möglichkeit, diese Tabelle zu "speichern" und es zu übernehmen?

Und noch eine weitere kleine Frage: In der Tabelle kann man wie oben schon beschrieben, etwas hineinschreiben. Wie kann man die Schriftfarbe dynamisch ändern? Also klar, mit type="color". Aber wie genau?

Hier der HTML und Javascript-Code:

<form method='post' name='first'>
  <table id='tab' border=5 id="box">
    <colgroup>
      <col width="40%">
      <col height="50%">
    </colgroup>
    <tbody>
      <th>Datum <br> Uhrzeit</th>
      <th>Map</th>
      <th>Ergebnis</th>
      <th>Spieler</th>
    </tbody>
    <tr>
      <td>
        <input id="changetext" type='text' type="color" name='Date' placeholder='Datum/Uhrzeit'>
      </td>
      <td>
        <input id="changetext" type='text' name='Map' placeholder='Map'>
      </td>
      <td>
        <input id="changetext" type='text' name='Result' placeholder='Ergebnis'>
      </td>
      <td>
        <input id="changetext" type='text' name='Player' placeholder='Spieler'>
      </td>
    </tr>
  </table>
  <br>
  <input type='button' value='neue Zeile' onClick='clone_this()'>
  <input id="changetext" type="color">
</form>
<script>
  var input = document.getElementById("changetext");
  var text = document.getElementById("text");

  input.addEventListener('change', function () {
    text.style.color = this.value;
  });
</script>

...zum Beitrag

Python mit HTML verbinden?

Hallo,

ich habe eine HTML- Datei und eine Python- Datei, welche ich mit Flask verbinden möchte. Mein Ziel ist es, dass wenn ich das Wort „Luna“ sage, ein div in der HTML- Datei eingefügt wird, doch bei mir funktioniert das nicht. Kann mir jemand erklären, wie ich die zwei Codes verbinden kann?

Freundliche Grüsse

...zum Beitrag

Html, Javascript <div> ab bestimmter Scrollposition einblenden?

Hallo!

Ich programmiere mir gerade eine Website und habe erst ein Menüband oben. Ab einer bestimmten Scrollposition soll dieses div verschwinden, und ein anderes auftauchen! Kann mir bitte jemand den Code senden? Danke!

...zum Beitrag

Wie ändere ich einen Paragraph indem ich einen Button benutze mithilfe von HTML und Javascript?

Hallo zusammen,

ich benötige einen Code. Ich möchte einen Paragraphen anzeigen lassen mit einem Text, der sich auf Knopfdruck ändern lässt und immer eine Value weiter springt, wenn ich diesen Button anklicke. Wie schreibe ich diesen Code mit HTML und JS?

Ich finde leider nur Hilfe für einen Text, der sich nur einmalig per Knopfdruck ändert. Ich möchte aber, dass dieser sich jedes Mal ändert, sobald ich den Button nochmal anklicke.

...zum Beitrag

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

HTML und JS Seitentitel alle 0.2 Sekunden ändern?

Ich bin gerade dabei, eine Seite zu erstellen, die die Möglichkeit hat auf Knopfdruck auf einen Button den Title zu ändern. Das habe ich geschafft, nur wenn ich diesen Titel alle X Sekunden ändern möchte, wie mache ich das?

Ich bedanke mich für verstandlichen Code!

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Title Changer</title>
        <link rel="stylesheet" href="./styles.css" />
        
    </head>


    <body>
        <script src="./app.js"></script>
        Click the button below to make the title go cRaZyYyYyY!
        <button onclick="makeitCrazy()">Make it cRaZyYyYyY</button>
    </body>
</html>

CSS:

body{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
}

JavaScript:

async function makeitCrazy(){
    while(true){
        document.title = 'One';
        await (1);
        document.title = 'Two';
    
    }
    
}

...zum Beitrag

Was ist eigentlich das div genau in html?

Wenn ich zum Beispiel 4 div Container im Code habe, ist der erste div Container dann ganz oben und der letzte div Container ganz unten?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen