尝试使用香草JS

Question

我已经使用JavaScript进行编码已有一段时间了，我刚刚开始使用通过JavaScript添加HTML元素的功能，并且有一个按钮，每次按下该按钮时都会添加两个输入字段。用户第一次按下按钮时，我希望元素从顶部向下推250px，每次间隔约20px，但是，相反，您会在运行代码时看到。这个问题与追加许多元素不同，因为这不是我的实际问题，我的实际问题是每次按下按钮时都试图使每对输入值与另一对输入值相隔20px。

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

您可以将输入的display更改为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>