Я делаю веб-страницу, которая позволяет пользователям добавлять свои интересы. Я планирую отправить входные данные в WebAPI позже. Я использовал Javascript DOM для создания новых кнопок для каждого ввода текста. Затем я добавил это в форме. Функция работает нормально, но проблема в том, что новые кнопки, которые появляются, появляются вне Div, в котором я хотел, чтобы они появлялись.
Вот скриншот этого. Снимок экрана веб-страницы
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>IPT - Student Register</title>
<meta name="description" content="IPT - NSBM">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-icon.png">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/themify-icons/css/themify-icons.css">
<link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
<link rel="stylesheet" href="assets/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body class="bg-dark">
<div class="sufee-login d-flex align-content-center flex-wrap">
<div class="container">
<div class="login-content">
<div class="login-logo">
<p>IPT Programme NSBM - NSBM - Student Registration</p>
</div>
<div class="login-form">
<div class="form-group">
<label>Enter your Qualifications</label>
<input type="text" class="form-control" id="myText" value=Qualification 1">
<br>
<button onclick="myFunction()">Add</button>
<br>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var y = document.getElementById("myText").value;
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", y);
document.body.appendChild(x);
}
</script>
</body>
</html>
Есть ли способ, которым я могу создать эти кнопки в самом белом цвете? Спасибо, ребята!