Как использовать GETELEMENT в определенном положении

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 s работать), вы можете также использовать 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>