Elemente hinzufügen

lano

Mitglied
Moin.

Ich hab mich soweit vor gearbeitet...
Javascript:
var script = document.createElement("script");
script.innerHTML = 'function myFunction() {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
} ';

document.body.appendChild(script);


//<input type="checkbox" onclick="myFunction()">
var input = document.createElement('input');


// <input aria-label="WLAN-Netzwerkschlüssel" maxlength="63" name="psk" data-v-input="true" autocomplete="off" type="text" id="uiPsk-input">
var elem = document.getElementById("uiPsk-input");
Das Script soll zum Body hinzugefügt werden.
Dann wollt ich ein input erzeugen, scheitere aber grad dran wie ich dem type und onlick mitgeben soll.
Zu guter letzt soll ein Input Feld gesucht werden und das input Feld das davor erzeugt wurde soll danach eingefügt werden.

Könnte mir da mal jemand nen Tip geben wie man das hin bekommt?
 

lord_haffi

Mitglied
That's what she said.. hehe
Dann wollt ich ein input erzeugen, scheitere aber grad dran wie ich dem type und onlick mitgeben soll.
Etwas in der Art vlt?
Javascript:
let input = document.createElement("input");
input.addEventListener("click", function(){ alert("Paste some fancy stuff here"); });
input.setAttribute("type", "text");
body.append(input);
Zu guter letzt soll ein Input Feld gesucht werden und das input Feld das davor erzeugt wurde soll danach eingefügt werden.
Was für ein Input-Feld suchst du denn? Um etwas nach einem bestimmten DOM-Element einzufügen, kannst du grundsätzlich sowas machen:
Javascript:
let refInput = document.querySelector("input[type='text']"); // Gewünschtes Input-Feld suchen
refInput.parentNode.insertBefore(input, refInput.nextSibling);
Für den Fall, dass refInput schon das letzte Element ist, gibt nextSibling null zurück. Dann fügt insertBefore das Element einfach ans Ende, also genau das, was du haben willst.
 

lano

Mitglied
Ja cool. Danke.

Ich hab das jetzt so:
Javascript:
let input = document.createElement("input");
input.addEventListener("click", function() {
    var x = document.getElementById("uiPsk-input");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
});
input.setAttribute("type", "checkbox");


let refInput = document.getElementById("uiPsk-input");
refInput.parentNode.insertBefore(input, refInput.nextSibling);
es tut was es soll.
 

lord_haffi

Mitglied
Ach, der EventListener ist für 'ne Checkbox. Da würde sich u.U. ein onchange besser anbieten als ein onclick. Das funktioniert dann auch, falls man programmatisch die Checkbox setzt, dann wird nämlich nur ein onchange- und kein onclick-event gefeuert. Zusätzlich kannst du auch abfragen, ob die Checkbox aktiviert ist, falls du das brauchst. Viel Spaß damit 🙃
Javascript:
input.addEventListener("change", function(event) {
    var x = document.getElementById("uiPsk-input");
    if (event.target.checked) {
        x.type = "text";
    } else {
        x.type = "password";
    }
});
 
Oben Unten