在其他Divs JavaScript中動態創建Divs

Question

我只想問一個簡單的問題。 我有這個代碼

<div id="mainContainer">
  <h2>Something</h2>
  <div id="leftColumn">
    <p><b>Left</b></p>
    <div id="dropContent">
      <div class="dragableBox hoehe1" id="box1">Box1 - 30</div>
      <div class="dragableBox hoehe2" id="box2">Box2 - 20</div>
      <div class="dragableBox hoehe3" id="box3">Box3 - 10</div>
      <div class="dragableBox hoehe4" id="box4">Box4 - 40</div>
      <div class="dragableBox hoehe5" id="box5">Box5 - 20</div> 
      <div class="dragableBox hoehe6" id="box6">Box6 - 10</div>
      <div class="dragableBox hoehe7" id="box7">Box7 - 20</div>
      <div class="dragableBox hoehe4" id="box8">Box8 - 10</div>
    </div>
  </div>
  <div id="rightColumn">
    <div id="dropBox" class="dropBox">
      <p><b>Right</b></p>
      <div id="dropContent2"></div>     
    </div>
  </div>
  <div class="clear"></div>
</div>

這將創建我需要的所有div。 我希望能夠使用javascript / jquery函數動態創建小里面的盒子（box1，box2等）。 我需要它們位於“事物”內部的“左側”內部。 框的詳細信息可以在類dragableBox和hoehe *中找到。 簡而言之，我需要一個javascript函數來完全創建與HTML標簽當前相同的功能。

任何幫助表示贊賞。 提前致謝。

Answer 1

這樣的事情-（ 當您在盒子上使用ID時，您可以使用#直接訪問它。您不必擔心ID在左邊還是右邊，只要保持ID唯一即可 。 ）

var $div = $('<div>').text("something");
$('#box1').append($div);
$('#box2').append($div);

Answer 2

var $div = $('<div class="dragableBox hoehe1" id="box1">Box1 - 30</div>');
$('#dropContent').append($div);

var $div = $('<div class="dragableBox hoehe2" id="box2">Box2 - 20</div>');
$('#dropContent').append($div);

//ETC....

這樣想嗎？

Answer 3

插入容器的末端

var MyValue = "Box2 - 20";
$('<div class="dragableBox hoehe1" id="box1">' + MyValue +'</div>').appendTo($('#dropContent')); 

插入容器的開頭

var MyValue = "Box2 - 20";
$('<div class="dragableBox hoehe1" id="box1">' + MyValue +'</div>').prependTo($('#dropContent'));