• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div mit button erzeugen

M

Masau

Neues Mitglied
hey leute, kann man mit einem button ein div innerhalb von einem anderen div erzeugen?
das ziel ist bei klick ein dragable Rechteck innerhalb eines größeren rechtecks zu erzeugen
 
Ja. Nur nicht mit HTML sondern mit JavaScript. Stichwörter nach denen Du suchen musst:
Code: 
document.createElement
und
Code: 
appendChild()

Moderation: Verschoben von HTML zu JavaScript.
 
sitze in der zeile 22 fest und bin ich überhaupt auf dem richtigen weg?

Code: 
<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
 
        <style type="text/css">
            #drawBox {
 
                width: 250px;
                height: 250px;
                background-color: red;
            }
 
        </style>
 
        <script type="text/javascript">
            function callDisObj() {
              
                var tempDiv = document.getElementById('drawBox');
                var newDiv = document.createElement("div");
 
Wie geht's weiter?
 
            }
 
        </script>
 
    </head>
 
    <body>
 
        <div id="navigationBox" style="float: left; width: 25%; height: 100%">
 
            <div id="roofBox">
 
                <input type="button" value="St&ouml;robjekt hinzuf&uuml;gen" oncontextmenu="callDisObj()">
 
            </div>
 
        </div>
 
        <div id="drawBox" style="float: left">
 
        </div>
 
    </body>
</html>
 
hab es gleich hinbekommen aber wie kann ich ihm gleich eine id geben?

Code: 
            function callDisObj() {
 
                // Erstellen des neuen div Elements
                // und Einfügen von Inhalt
                var newDiv = document.createElement("div");
                var newContent = document.createTextNode("Hallihallo und schönen Gruß!");
 
                newDiv.appendChild(newContent);
                // Textknoten dem zuvor erstellten div hinzufügen.
 
                // Das neu erstellte Element und sein Inhalt der DOM-Struktur hinzufügen
                my_div = document.getElementById("drawBox");
                document.body.insertBefore(newDiv, my_div);
            }
 
kann ich auch die Position und maß ändern?
newDiv.width usw... geht leider nicht

edit:

newDiv.style.width = 100+"px";
newDisObjDiv.style.left = 100 + "px";
newDisObjDiv.style.top = 100 + "px";
hat geklappt
 
Zuletzt bearbeitet:
#PUSH

wie kann ich dem erstelltem div eine mouseAction zuteilen wie z.b. onmouseclick="callEdit" ???
und gibt es eine Möglichkeit das erstellte div anhand von jquery dragable zu machen?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben