2017-08-14 76 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>

相关问题