尝试使用香草JS将换行符插入HTML

Question

I've been coding with JavaScript for a while now and I just started using the features for adding HTML elements through JavaScript and I have a button that adds two input fields each time it's pressed. The first time the user presses the button I want the element pushed down 250px from the top, and each time have about 20px spacing, but instead of that, well you'll see when you run the code. This question not the same as append many elements because its not my real issue, my real issue is trying to get each pair of input values separated by 20px from the other one each time the button is pressed.

 let addN = document.getElementById("adda"); let margin = 250; addN.addEventListener("click", () => { let newCoordsX = document.createElement('input'); let newCoordsY = document.createElement('input'); newCoordsX.placeholder = "X value"; newCoordsY.placeholder = "Y value"; newCoordsX.style.marginTop = margin + "px"; document.body.appendChild(newCoordsX); document.body.appendChild(newCoordsY); }); 

 #adda { position:absolute; top:140px; /*left:-1300px;*/ left: 0px; width:180px; height:40px; padding:5px; background-color:rgb(171, 202, 252); border-radius:15px; } #add { position:absolute; color:white; font-weight:bold; font-size:21px; left:14px; top:10px; } #adda:hover{ cursor:pointer; background-color:rgb(191, 215, 252); } 

 <div id="adda"> <div id="add">Add another node</div> </div> 

Answer 1

You can change the display of inputs to block

 let addN = document.getElementById("adda"); let margin = 250; addN.addEventListener("click", () => { let newCoordsX = document.createElement('input'); let newCoordsY = document.createElement('input'); newCoordsX.placeholder = "X value"; newCoordsY.placeholder = "Y value"; newCoordsX.style.marginTop = margin + "px"; newCoordsX.style.display = "block" newCoordsY.style.display = "block" document.body.appendChild(newCoordsX); document.body.appendChild(newCoordsY); }); 

 #adda { position:absolute; top:140px; /*left:-1300px;*/ left: 0px; width:180px; height:40px; padding:5px; background-color:rgb(171, 202, 252); border-radius:15px; } #add { position:absolute; color:white; font-weight:bold; font-size:21px; left:14px; top:10px; } #adda:hover{ cursor:pointer; background-color:rgb(191, 215, 252); } 

 <div id="adda"> <div id="add">Add another node</div> </div>