I am wondering if it’s possible to append children onto different lines in JavaScript. I am trying to recreate an old Oregon Trail project and am taking a new approach at it, and when I append the existing children they show up directly next to each other. Is there a way to get them to print out on different lines.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<h1>Oregon Trail</h1>
</div>
<span id="span"><button id="btn" class="btns">Lantern</button><br>
<button id="btn1" class="btns">Lantern and butter churn</button><br>
<button id="btn2" class="btns">Butter churn</button><br>
<button id="btn3" class="btns">Box</button><br>
</span>
<script src="script.js"></script>
</body>
</html>
const btnElement = document.getElementById("btn");
const button = document.createElement("btn22");
const button1 = document.createElement("btn23");
button.innerText = "Yes";
button1.innerText = "No";
button.classList.add("btns");
button1.classList.add("btns");
btnElement.addEventListener("click", () => {
document.body.appendChild(button);
document.body.appendChild(button1);
})
I haven’t tried much other than attaching the child to a string, but nothing has worked and it doesn’t look like anyone has had this issue before.