如何使用具有特定位置的 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>

如何使用具有特定位置的 GET ELEMENT

How to use GETELEMENT with an specific position

javascript

css

position

jsfiddle