2017-08-14 48 views
0

我在堆棧溢出中看到了不同的答案,但似乎沒有任何效果!如何在javascript中的輸入元素之後的文本節點之後添加換行符

下面是代碼:

var input1 = document.createElement("input"); 
 
var input2 = document.createElement("input"); 
 
var input3 = document.createElement("input"); 
 
input1.setAttribute("type","checkbox"); 
 
input2.setAttribute("type","checkbox"); 
 
input3.setAttribute("type","checkbox"); 
 
var br = document.createElement("br"); 
 
var text1 = document.createTextNode("option1"); 
 
var text2 = document.createTextNode("option2"); 
 
var text3 = document.createTextNode("option3"); 
 
var se = document.getElementById("container"); 
 
input1.appendChild(text1); 
 
input2.appendChild(text2); 
 
input3.appendChild(text3); 
 
se.appendChild(input1); 
 
se.appendChild(br); 
 
se.appendChild(input2); 
 
se.appendChild(input3);
<body> 
 
    <form> 
 
     <div id="container"> 
 
     </div> 
 
     <br /> 
 
    </form> 
 
</body>

我試圖獲得對應於每個輸入元素對彼此頂部用自己的文字的垂直顯示的複選框右邊,並在每行的末尾有一個換行符。我想避免使用display:block來顯示CSS中的輸入元素。

+1

要附加一個文本節點的複選框,將什麼也不做 –

+3

不能文本節點附加到輸入元素,輸入元素有一個空的內容模型。正確做到這一點 - 創建一個標籤元素來保存文本,並將輸入放入標籤 - 然後使用CSS實現所需的格式。 – CBroe

回答

0

希望這可以幫助你。

var input1 = document.createElement("input"); 
 
var input2 = document.createElement("input"); 
 
var input3 = document.createElement("input"); 
 
input1.setAttribute("type","checkbox"); 
 
input2.setAttribute("type","checkbox"); 
 
input3.setAttribute("type","checkbox"); 
 
var br1 = document.createElement("br"); 
 
var br2 = document.createElement("br"); 
 
var br3 = document.createElement("br"); 
 
var text1 = document.createTextNode("option1"); 
 
var text2 = document.createTextNode("option2"); 
 
var text3 = document.createTextNode("option3"); 
 
var se = document.getElementById("container"); 
 

 
se.appendChild(input1); 
 
se.appendChild(text1); 
 
se.appendChild(br1); 
 
se.appendChild(input2); 
 
se.appendChild(text2); 
 
se.appendChild(br2); 
 
se.appendChild(input3); 
 
se.appendChild(text3); 
 
se.appendChild(br3);
<body> 
 
    <form> 
 
     <div id="container"> 
 
     </div> 
 
     <br /> 
 
    </form> 
 
</body>

相關問題