Question

我有一个看起来像这样的HTML代码。

        <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>

我想动态地为这个html添加一些代码。我希望它最终看起来像这样。

    <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>`

我跟随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);
});

一切都很好，但最后没有附加图例div。

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);
  });


});

添加图例时代码中的this指的是horizontal-double-large对象

<强>更新我创造了一个小提琴，它被添加了 FIDDLE

Child Div未动态添加

1 个答案: