JavaScriptでUL（順序なしリスト）に改行付きで項目を追加する方法
順序なしリスト（UL）に新しい項目を改行付きで追加するには、document.querySelector()とappend()メソッドを組み合わせて使用します。ユーザーが入力した値をli要素として動的にリストへ追加することで、各項目が新しい行に表示されます。以下に具体的なサンプルコードを示します。
サンプルコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h1{
font-size: 2.50rem;
}
h2, label{
font-size: 1.50rem;
}
</style>
</head>
<body>
<h1>Adding Name Demo</h1>
<div>
<label>Enter The Name:</label>
<input class="txtName" type="text" />
<button class="btnName">Save</button>
</div>
<h2>List Of Name</h2>
<ul class="listOfName"></ul>
<script>
const buttonName = document.querySelector('.btnName')
const addName = e => {
let nameTxt = document.querySelector('.txtName'),
name = nameTxt.value.trim()
if (name) {
let tagLi = document.createElement('li')
tagLi.textContent = name
document.querySelector('.listOfName').append(tagLi)
nameTxt.value = ''
}
}
buttonName.addEventListener('click', addName)
</script>
</body>
</html>プログラムの実行方法
上記のプログラムを実行するには、ファイル名を「anyName.html」（index.htmlなど）として保存し、ファイルを右クリックします。VS Codeエディターを使用している場合は、「Open with Live Server」オプションを選択してください。
実行結果
プログラムを実行すると、以下のような画面が表示されます。
ここでは、テキストボックスに値を入力します。例として、名前に「John」と入力してみましょう。
続いて「Save」ボタンをクリックします。クリック後の出力は以下の通りです。
次に、別の名前として「Bob」を入力します。この時点での表示は以下のようになります。
再度「Save」ボタンをクリックすると、リストに新しい項目が追加され、出力は以下のようになります。
コードの解説
このコードの仕組みを簡単にまとめると、以下の通りです。
document.querySelector('.btnName')で「Save」ボタンの要素を取得し、クリックイベントリスナーを登録します。- ボタンがクリックされると、テキストボックスから入力値を取得し、
trim()メソッドで前後の余分な空白を除去します。 - 値が空でない場合、
document.createElement('li')で新しいli要素を作成し、textContentプロパティに入力された名前を設定します。 append()メソッドでli要素をULリストに追加し、テキストボックスをクリアします。これにより、入力した名前が新しい行（リスト項目）として順次表示されていきます。
-
JavaScriptでループ処理に遅延を追加する方法をわかりやすく解説
JavaScriptでループの各反復の間に遅延（待ち時間）を設けたい場合は、setTimeout() メソッドを使用します。この記事では、基本的な実装例から、より読みやすいモダンな書き方まで、コード例とともに解説します。 setTimeout()でループに遅延を追加する仕組み setTimeout() は、指定したミリ秒後にコールバック関数を一度だけ実行するメソッドです。ループ内で単に setTimeout(fn, 2000) と書くだけでは、すべてのタイマーがほぼ同時に登録されてしまい、意図した通りの遅延になりません。 そこでポイントとなるのが、遅延時間にループカウンタを掛け算するという手法
-
JavaScriptでUL（順序なしリスト）に改行付きで項目を追加する方法
順序なしリスト（UL）に新しい項目を改行付きで追加するには、document.querySelector()とappend()メソッドを組み合わせて使用します。ユーザーが入力した値をli要素として動的にリストへ追加することで、各項目が新しい行に表示されます。以下に具体的なサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co