Günni: HTML-Element dynamisch einfügen

Morgen an alle,
hoffe ihr versteht meine Anfängerfrage :-)

Ich möchte per JavaScript hinter jedes <input type="checkbox"...> ein <img src="...> hängen. Also müsste JS die Datei durchsuchen und mit innerHTML oder so das img genau hinter das input schreiben. Außerdem bräuchte ich im img (für ein onclick) noch die id des jeweils vorstehenden inputs.

Ist das möglich?

Günni

  1. Hello,

    Ist das möglich?

    ja:
    document.getElementsByTagname zusammen mit
    .type

    dann
    document.createElement
    und
    insertBefore bzw. appendChild

    Danach noch Hinzufügen des Eventhandlers

    MfG
    Rouven

    --
    -------------------
    sh:| fo:} ch:? rl:( br:& n4:{ ie:| mo:} va:) js:| de:] zu:| fl:( ss:) ls:& (SelfCode)
    Because good guys need a break every once in a while.  --  Morty in "Click" (Columbia Pictures, 2006)
    1. Sorry aber ich kriegs nicht hin:

      <html>
      <body onload="abc();">

      <script language="javascript">
      function abc() {
        var inputs = document.getElementsByTagName("input");
        //alert(inputs.length);

      for (var i = 0; i < inputs.length; i++) {
        //alert(inputs[i].type);
          if (inputs[i].type == "checkbox") {
            //alert("checkbox");
            var newLI = document.createElement("span");
            var newLIText = document.createTextNode("Das ist Listeneintrag Nummer");
            newLI.appendChild(newLIText);
            //alert(document.getElementsByTagName("input")[i].id);
            document.getElementsByTagName("input")[i].appendChild(newLI);
          }
        }
      }
      </script>

      <input type="checkbox" name="Checkbox1" id="Checkbox1" value="">Checkbox1<br>
      <input type="checkbox" name="Checkbox2" id="Checkbox2" value="">Checkbox2<br>
      <input type="text" name="text" id="text" value="">Text<br>
      <input type="checkbox" name="Checkbox3" id="Checkbox3" value="">Checkbox3<br>
      <input type="checkbox" name="Checkbox4" id="Checkbox4" value="">Checkbox4<br>
      <!--img id="img" src="rot.gif"-->

      </body>
      </html>

      Vielen Dank für die Mühe!

      1. Hallo,

        <input type="checkbox" name="Checkbox1" id="Checkbox1" value="">Checkbox1<br>
        <input type="checkbox" name="Checkbox2" id="Checkbox2" value="">Checkbox2<br>
        <input type="text" name="text" id="text" value="">Text<br>
        <input type="checkbox" name="Checkbox3" id="Checkbox3" value="">Checkbox3<br>

        du hast dir noch nicht das Verwandschaftsverhältnis dieser Elemente klargemacht. Hier haben alle <input> Text und <br> - Elemente ein Parentelement ( z.b. das <form> oder <fieldset>)

        Dem Parentelement möchtest du nun ein weiteres Kind zuweisen und in die Kette der Kinder einfügen.

          
        var cb1=document.getElementById("Checkbox1");  
        cb1.parentNode.insertBefore(new_elem, cb1.nextSibling)  
        
        

        http://de.selfhtml.org/javascript/objekte/node.htm

        Gruß plan_B

        --
             *®*´¯`·.¸¸.·
        1. Danke für die Hilfe!

  2. Hallo,

    ... Außerdem bräuchte ich im img (für ein onclick) noch die id des jeweils vorstehenden inputs.

    vielleicht suchst du auch nach solch einer Schachtelung

      
    <label><input type="checkbox" .. ><img alt="click hier" src=... ></label>  
    
    

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    1. Interessant.
      Danke.