createElement() - Html Teil mit js erstellen, wie?

Noobie_Chan · 12. April 2020

Hy

Habe folgendes problem, möchte einen Teil in js erstellen lassen (denke wäre sinvoll) Nur kein plan wie man ein erstelltest element weitere element darunter hinzufügt. div Id=" valueStats" steht im html code bereit.

Hier der Html code:

Code

<div id="valueStats">

    <div class="min-row" id="mainBlock">

        <div class="min-col-1 start">
            <ul>
                <li>MAX TP</li>
                <li>ANG</li>
                <li>K.VERT</li>
                <li>M.VERT</li>
            </ul>   
        </div>

        <div class="min-col-2">                                        
            <ul>
                <li><span>0</span> ( <span id="Hp"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Atk"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="P_Def"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="M_Def"></span> + <span>0</span> )</li>
            </ul>                                        
        </div> 

    </div>
                            
    <div class="min-row">                           
        <div class="min-col-1 start">   
            <ul>
                <li>ANG Geschw.</li>
                <li>Krit</li>
                <li>Krit. Schaden</li>
                <li>Durchdringung</li>
                <li>Lebensraub</li>
                <li>MP Erholung/Angriff</li>
                <li>MP Erholung/Schaden</li>
                <li>MP Erholung/Sek</li>
                <li>PRÄZ</li>
            </ul>   
        </div>
                                
        <div class="min-col-1"> 
            <ul>
                <li><span>0</span> ( <span id="Atk_Speed"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Crit"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Crit_Dmg"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Penetration"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Mp_Recovery_Atk"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Acc"></span> + <span>0</span> )</li>
            </ul>  
        </div>
                                
        <div class="min-col-1">  
            <ul>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
            </ul>  
        </div>                         
    </div>
                            
    <div class="min-row">
        <div class="min-col-1 start">
            <ul>
                <li>K. Block</li>
                <li>K. Block VERT.</li>
                <li>K. Ausw.</li>
                <li>K. Stärkung</li>
                <li>K. Krit Resistance</li>
            </ul>
        </div>
                                
        <div class="min-col-1">
            <ul>
                <li><span>0</span> ( <span id="P_Block"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="P_Block_Def"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="P_Dodge"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="P_Tough"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
            </ul>
        </div>
                                
        <div class="min-col-1">
            <ul>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
            </ul>
        </div>                        
    </div>
                            
    <div class="min-row">
                                
        <div class="min-col-1 start">
            <ul>
                <li>M. Block</li>
                <li>M. Block VERT.</li>
                <li>M. Ausw.</li>
                <li>M. Stärkung</li>
                <li>M. Krit Resistance</li>
            </ul>
        </div>

        <div class="min-col-1">
            <ul>
                <li><span>0</span> ( <span id="M_Block"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="M_Block_Def"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="M_Dodge"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="M_Tough"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
            </ul>                           
        </div>
                                
        <div class="min-col-1">
                                    
            <ul>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
            </ul>
        </div>                           
    </div>
                            
    <div class="min-row">
                                
        <div class="min-col-1 start">
            <ul>
                <li>Block</li>
                <li>VERT</li>
                <li>Ausw.</li>
                <li>Krit Resistance</li>
                <li>CC Resistenz</li>
                <li>Schwächung PRÄZ</li>
            </ul>
        </div>

        <div class="min-col-1">
                                    
            <ul>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span id="Cc_Resist"></span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
            </ul>
        </div>
                                
        <div class="min-col-1">
            <ul>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
            </ul>
        </div>
    </div>
</div>

Alles anzeigen

Hier mein js:

Code

const categoryBox = {
    mainBox: { hp: 'MAX TP', atk: 'Ang', p_Def:'K. Def', m_Def: 'M. Def'},
    offensiveBox: { crit: 'Krit', crit_Dmg: 'Krit Schaden', penetration: 'Durchdringung', acc: 'Präz'},
    defensiveBox: { p_Dodge: 'K. Ausweichen', m_Dodge: 'M. Ausweichen', p_Block: 'K. Block', m_Block: 'M. Block', p_Block_Def: 'K. Block Vert.', m_Block_Def: 'M. Block Vert.', p_Tough: 'K. Stärkung', m_Tough: 'M. Stärkung', p_Crit_Resist: 'K. Krit WDST', m_Crit_Resist: 'M. Krit WDST'},
    subBlockBox: { cc_Resist: 'CC-WDST', cc_Acc: 'CC-Präz',  lifesteal: 'Lebensraub', atk_Speed: 'Ang Geschw.', mp_Recover_Atk: 'MP Erholung/Ang', mp_Recover_Dmg: 'MP Erholung/Schaden', mp_Recover_Sec: 'MP Erholung/Sekunde'},
  };

window.onload = function () {
    let container = document.getElementById('valueStats');
    htmlFragment = document.createDocumentFragment();
    console.log(container);


    for(let property in categoryBox){
      createCategory(property);
    }
    console.log(htmlFragment);
  }

  // create category & add id, class
  function createCategory(elem) {
    let newDiv = document.createElement('div');
    if(categoryBox.hasOwnProperty(elem)) {
      newDiv.id = elem;
      newDiv.classList.add('min-row');
    }
    console.log(categoryBox[elem]);


    htmlFragment.appendChild(newDiv);
    console.log(newDiv);
  }

Alles anzeigen

Geht das so in die richtige richtung oder lauf ich da gegen was an?

(Internet spuckt nix aus, ausßer createElement(), creatDocumentFragment(), )

Bitte um tipps.

Mfg.

PS. Frohe Ostern!

Sempervivum · 12. April 2020

Ebenfalls frohe Ostern!

Ich habe es nicht getestet, aber ich denke, Du bist da schon auf dem richtigen Weg. Du musst dann nur das htmlFragment noch dem Container hinzu fügen.

DocumentFragment hat schon Vorteile, aber wenn Du ein einziges Element erzeugen und hinzu fügen willst, geht es wahrscheinlich auch ohne.

Noobie_Chan · 12. April 2020

Ich möchte schön mehrere elemente erzeugen, deswegen mit DocumentFragment. Problem ist wenn ich schon ein div erzeuge, möchte ich ein div ins das erste div erzeugen. Muss ich es mir mit getElementById(....) holen? Oder kann ich in das erzeugte div ein weiteres div erzeugen? Wenn ja wie? Aussehen sollte es so:

Html:

Code

<div id="valueStats">
    <div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

    </div>

    <div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        <div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        <div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        <div>
    </div>
        
    <div>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
        
    <div>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>

</div>

Alles anzeigen

<div id="valueStatus"></div> steht schon im Html, mit createElement füge ich 4x div hinzu +class, id. Und zu jeden div möchte ich weitere kind elemente <div> erzeugen. Wie kann ich sie hinzufügen? Kann ich sie hinzufügen wenn er das erste div erzeugt (+2 kindelemente), usw.bis zum <li>...</li>? (dadurch erzeuge ich mehrere elemente, deshalbt createDocumentFragment()). Ich weis halt nicht wie ich bei einem erzeugten div ein weiter div (kindelement) hinzufügen kann. Bin da selbst ziemlich confused.

Sempervivum · 12. April 2020

Zitat

Ich möchte schön mehrere elemente erzeugen, deswegen mit DocumentFragment.

Das ist natürlich ein Grund und dann ist es auch angebracht.

Zitat

möchte ich ein div ins das erste div erzeugen. Muss ich es mir mit getElementById(....) holen?

Wenn ich das richtig verstehe, hast Du das Div ja als Javascript-Objekt und dann kannst Du das neue auch dort einfügen. In etwa so:

Code

    let newDiv = document.createElement('div');
    if(categoryBox.hasOwnProperty(elem)) {
      newDiv.id = elem;
      newDiv.classList.add('min-row');
    }
    let newDiv2 =document.createElement('div');
    // dieses div erweitern mit class, id etc.
    // und dem ersten Div hinzu fügen:
    newDiv.appendChild(newDiv2);
    
    console.log(categoryBox[elem]);
    htmlFragment.appendChild(newDiv);

Alles anzeigen

Noobie_Chan · 12. April 2020

Funktioniert "glaub ich" genau so wie es soll, kann es nicht richtig überprüfen, beim log läufts verkehr die ausgabe. Nach dem ich bis zum element <li> gekommen bin, sehe ich ob ich alles richig gemacht habe.

Ich denke das ich es in etwas verstanden habe die schreibweise und mit appendChild(). Wenn ich fertig bin werde ich meinen Code hier posten.

thx

Sempervivum · 12. April 2020

Ja, lass wissen, ob Du so zum Ziel gekommen bist.

Noobie_Chan · 13. April 2020

Habe jetzt einmal geschafft die Rohform, sieht glaub ich gut aus.

html:

Code

<div id="valueStats"></div>

js:

Code

const categoryBox = {
    mainBox: { hp: 'MAX TP', atk: 'Ang', p_Def: 'K. Vert', m_Def: 'M. Vert' },
    offensiveBox: { crit: 'Krit', crit_Dmg: 'Krit Schaden', penetration: 'Durchdringung', acc: 'Präz' },
    defensiveBox: { p_Dodge: 'K. Ausweichen', m_Dodge: 'M. Ausweichen', p_Block: 'K. Block', m_Block: 'M. Block', p_Block_Def: 'K. Block Vert.', m_Block_Def: 'M. Block Vert.', p_Tough: 'K. Stärkung', m_Tough: 'M. Stärkung', p_Crit_Resist: 'K. Krit WDST', m_Crit_Resist: 'M. Krit WDST' },
    subBlockBox: { cc_Resist: 'CC-WDST', cc_Acc: 'CC-Präz', lifesteal: 'Lebensraub', atk_Speed: 'Ang Geschw.', mp_Recover_Atk: 'MP Erholung/Ang', mp_Recover_Dmg: 'MP Erholung/Schaden', mp_Recover_Sec: 'MP Erholung/Sekunde' },
  };



  window.onload = function () {
    let container = document.getElementById('valueStats');
    htmlFragment = document.createDocumentFragment();
    console.log(container);

    // create category & add id, class
    for (let property in categoryBox) {
      let newDiv = document.createElement('div');
      if (categoryBox.hasOwnProperty(property)) {
        newDiv.id = property;
        newDiv.classList.add('min-row');
        htmlFragment.appendChild(newDiv);
        createBlock1(newDiv, property);
        createBlock2(newDiv);
        createBlock3(newDiv);
        console.log(newDiv);
      }
    }

    // column 1 (left)
    function createBlock1(newDiv, property) {
      let newDiv2 = document.createElement('div');
      newDiv2.classList.add('min-col-1', 'start');
      newDiv.appendChild(newDiv2);
      createUl(newDiv2, property);
      console.log(newDiv2);
    }

    // column 2 (mid)
    function createBlock2(newDiv) {
      let newDiv3 = document.createElement('div');
      if (newDiv.id === 'mainBox') { newDiv3.classList.add('min-col-2'); }
      newDiv3.classList.add('min-col-1');
      newDiv.appendChild(newDiv3);
      createUl(newDiv3);
      console.log(newDiv3);
    }

    // column 3 (right)
    function createBlock3(newDiv) {
      if (newDiv.id !== 'mainBox') {
        let newDiv4 = document.createElement('div');
        newDiv4.classList.add('min-col-1');
        newDiv.appendChild(newDiv4);
        createUl(newDiv4);
        console.log(newDiv4);
      }
    }

    // Create Ul
    function createUl (div, property) {
      let newUl = document.createElement('ul');
      div.appendChild(newUl);
      createLi(newUl, property);
      console.log(newUl);
    }

    // Create Li points
    function createLi (ul, id) {
      let obj = categoryBox[id];
      console.log(obj);
      
      for (let property in obj) {
        let newLi = document.createElement('li');
        newLi.innerText = obj[property];
        ul.appendChild(newLi);

        console.log(newLi);
        console.log(newLi.innerText); 
      }


    }
    container.appendChild(htmlFragment);
    console.log(htmlFragment);
  }

Alles anzeigen

Habe erst etwas spät gemerkt das ich ja noch span drinen habe :$. Werde jetzt noch den code besser formatieren. Und dann weiter mit dem span anfangen.

Kurzes feedback zum code wäre super. Was gut gemacht ist und was schlecht gemacht ist (Bin noch Anfänger!) Verbesserungen vorschläge, tipps, etc. erwünscht. (damit ich mir neues aneignen kann)

Mfg.

createElement() - Html Teil mit js erstellen, wie?

Jetzt mitmachen!

Teilen