javascript - 如何对特定位置使用 GET ELEMENT

Question

我看过这段代码( http://jsfiddle.net/eMNfd/21/ )，但我想知道如何让新的div可以创建在蓝色的右侧，即水平模式下。

document.getElementById("text").onclick = function () {
    var ok = true;

     if (ok === true) {
          var div = document.createElement('div');
           
          div.className = 'new-rect';       
            //div.style.backgroundColor = "black";

       document.getElementsByTagName('body')[0].appendChild(div);
    }
};

.new-rect {
    background: black;
    width: 20%;
    height: 30px;
}

<div id="text" style="width:20%;height:30px;background-color:blue;"></div>

谢谢大家。

Answer 1

您可以使用float(必须在所有div上设置才能工作)，您也可以使用inline-block :

document.getElementById("text").onclick = function () {
    var ok = true;

     if (ok === true) {
          var div = document.createElement('div');
           
          div.className = 'new-rect';       
            //div.style.backgroundColor = "black";

       document.getElementsByTagName('body')[0].appendChild(div);
    }
};

body {
  font-size: 0; /* to get rid of the space between the divs */
  white-space: nowrap; /* to prevent wrapping on multiple lines */
}

div {
  display: inline-block; /* to add divs horizontally */
}

.new-rect {
    background: black;
    width: 20%;
    height: 30px;
}

<div id="text" style="width:20%;height:30px;background-color:blue;"></div>