html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
<title>Document</title>
</head>
<body>
<ul class="list"></ul>
<form action="" id="myform">
<input type="text">
<button>Add to List</button>
</form>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
body
{
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ul = document.querySelector(".list");
const li = document.createElement("li");
const input = document.querySelector("input");
const button = document.querySelector("button");
const form = document.getElementById("myform");
form.addEventListener("submit", e => {
e.preventDefault();
li.innerText = input.value;
li.classList.add("list");
ul.appendChild(li);
input.value = "";
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run