Zenn
✨

[JavaScript]DOM操作

2023/11/15に公開
JavaScript
#
dom
tech

js勉強しているけど忘れそうだから備忘録...

実装内容

  1. ユーザーがテキストボックスに文字列を入力
  2. ユーザーがボタンを押す
  3. リストの最後の項目として文字列が追加される

ソースコード

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="list">

  </ul>
  <input id="textBox" type="text">
  <input id="button" type="button" value="Add!">
  <script src="main.js"></script>
</body>
</html>
main.js
'use strict';
const e = document.getElementById('button');
e.addEventListener('click', () => {
  const textBox = document.getElementById('textBox');
  const li = document.createElement('li');
  const text = document.createTextNode(textBox.value);
  li.appendChild(text);
  list.appendChild(li); // <li>test</li>
}, false);

Discussion