Child Div nicht dynamisch hinzugefügt

Question

Ich habe einen HTML-Code, der so aussieht.

 <div class="horizontal-double-large pink" data-title="health" data-legend-one="medical" data-legend-two="natural"> 
     <div class="horizontal-double-element" data-name="India" data-one="40" data-two="100"></div> 
    </div> 

Ich möchte etwas Code dynamisch zu diesem HTML hinzufügen. Ich möchte, dass es am Ende so aussieht.

<div class="horizontal-double-large pink" data-titl.......>  
    <div class="title"> 
     <h2>Title</h2> 
    </div> 


     <div class="horizontal-double-element" data-name="chegkoslovakia" data-one = "40" data-two="60"> 
     <div class="name"><p>Chegkoslovakia</p></div> 
     <div class="bar-area"> 
      <div class="bar-one"></div> 
      <div class="bar-two"></div> 
     </div> 
     <div class="value"><p>40%<br>50%</p></div> 
     </div> 

     <div class="legend"> 
     <div class="legend-one"></div> 
     <p>text</p> 
     <div class="legend-two"></div> 
     <p>Text</p> 
     </div> 
    </div>` 

Ich habe folgende jquery.

$(".horizontal-double-large").each(function(){ 
    var title = document.createElement("div"); 
    title.className="title"; 
    title.innerHTML="<h2>"+$(this).attr("data-title")+"</h2>"; 
    $(this).prepend(title); 


    $(this).find(".horizontal-double-element").each(function(){ 
    var name = document.createElement("div"); 
    name.className="name"; 
    name.innerHTML="<p>"+$(this).attr("data-name")+"</p>"; 
    $(this).append(name); 

    var bararea = document.createElement("div"); 
    bararea.className="bar-area"; 
    var barone = document.createElement("div"); 
    barone.className = "bar-one"; 
    var width = ($(this).attr("data-one")/100)*415.8; 
    barone.style.width = width; 
    bararea.appendChild(barone); 

    var bartwo = document.createElement("div"); 
    bartwo.className = "bar-two"; 
    var width = ($(this).attr("data-two")/100)*415.8; 
    bartwo.style.width = width; 
    bararea.appendChild(bartwo); 
    $(this).append(bararea); 
    var value=document.createElement("div"); 
    value.className="value"; 
    //var valueVal=document.createElement("p"); 
    value.innerHTML="<p>"+$(this).attr("data-one")+"%<br>"+$(this).attr("data-two")+"%</p>"; 
    $(this).append(value); 

    }); 

    var legend = document.createElement("div"); 
    var one = document.createElement("div"); 
    legend.className="legend"; 
    one.className="legend-one"; 
    legend.append(one); 
    $(this).append(legend); 
}); 

alles ist in Ordnung, aber die Legende Div ist nicht am Ende angehängt.

Answer 1

$(this).find(".horizontal-double-element").each(function(){ 
    var name = document.createElement("div"); 
    name.className="name"; 
    name.innerHTML="<p>"+$(this).attr("data-name")+"</p>"; 
    $(this).append(name); 

    var bararea = document.createElement("div"); 
    bararea.className="bar-area"; 
    var barone = document.createElement("div"); 
    barone.className = "bar-one"; 
    var width = ($(this).attr("data-one")/100)*415.8; 
    barone.style.width = width; 
    bararea.appendChild(barone); 

    var bartwo = document.createElement("div"); 
    bartwo.className = "bar-two"; 
    var width = ($(this).attr("data-two")/100)*415.8; 
    bartwo.style.width = width; 
    bararea.appendChild(bartwo); 
    $(this).append(bararea); 
    var value=document.createElement("div"); 
    value.className="value"; 
    //var valueVal=document.createElement("p"); 
    value.innerHTML="<p>"+$(this).attr("data-one")+"%<br>"+$(this).attr("data-two")+"%</p>"; 
    $(this).append(value); 

    // Move legend in this scope 
    var legend = document.createElement("div"); 
    var one = document.createElement("div"); 
    legend.className="legend"; 
    one.className="legend-one"; 
    legend.append(one); 
    $(this).append(legend); 
    }); 


}); 

Die this in Ihrem Code während Legende Hinzufügen bezieht sich auf horizontal-double-large Objekt

Update: ich eine Geige geschaffen und es wurde FIDDLE