JS createElementの使い方
【index.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<script src="index.js" defer></script>
<title>Document</title>
</head>
<body>
<input type="text" id="form" onchange="createInputText()">
<ul id="parent">parentです。</ul>
</body>
</html>
【index.css】
#parent {
background-color: #eee ;
padding: 10px;
}
#blue {
background-color: blue;
padding: 10px;
color: #fff ;
}
li {
margin: 5px;
}
【index.js】
function createInputText () {
var form = document.getElementById("form");
var area = document.createElement('li');
area.id = 'blue';
area.innerHTML = form.value;
var parent = document.getElementById('parent');
parent.appendChild(area);
form.value = '';
}
この記事が気に入ったらサポートをしてみませんか?