のJavascriptのappendChild（）

Question

ねえ、私は）（のappendChildにしようとしています二つの連続のdivのが、私は結果として期待していことは、彼らが並んでするためのものですが、彼らはそうのような他の上のいずれかです。

1st div 
2nd div 

デフォルトでは

代わりに、第一のdiv第二のdivの

var addBudContainer = document.createElement("div"); 
addBudContainer.id = "addBudContainer"; 

var addBudBtn = document.createElement("div"); 
addBudBtn.className = "addBud"; 

var addBudBtnName = document.createElement("a"); 
addBudBtnName.className = "btn-addBud"; 
addBudBtnName.setAttribute("href","#"); 

addBudBtn.appendChild(addBudBtnName); 

var addBudTxt = document.createElement("input"); 
addBudTxt.id="addBudTxt"; 
addBudTxt.type="text"; 
addBudTxt.defaultValue="Enter buddy name"; 
//txt box effects 
addBudTxt.onfocus = function(){if(replyTxt.value==replyTxt.defaultValue) replyTxt.value='';}; 
addBudTxt.onblur= function(){if(replyTxt.value=='') replyTxt.value=replyTxt.defaultValue;}; 

addBudContainer.appendChild(addBudBtn); 
addBudContainer.appendChild(addBudTxt); 

Answer 1

、<div>要素は "ブロック" 要素です。簡単に言えば、<div>は、親要素内のそれ自身の行（または行）になります。

<span>の要素は、デフォルトで「インライン」です。これは、使用したい要素である可能性があります。インライン要素は、兄弟要素を他の行にプッシュしません。

この動作を無効にする場合は、CSSを使用できます。

/* This assumes the parent element of your divs has 'some_class' as its class */ 
.some_class > div { 
    display: inline; 
} 

編集：display: inlineの後にオプションのセパレータセミコロンを追加しました。

Answer 2

要素が別々のブロックではなくインラインでレイアウトされるようにする場合は、<div>の代わりに<span>を使用すると良い結果が得られます。

Answer 3

"float：left" CSSプロパティをDIVに追加することもできます。これにより、DIVが囲まれた要素の使用可能な幅を埋めるまで左側に重ねてスタックされます。