HTML: ul,ol,li タグ: JavaScript (1)

JavaScript 基本的なサンプル

li のインデックス値など

• TestJS_querySelectorAll_li01.html
  querySelectorAll() のサンプル。ul-liリストの li を取得。
  
• TestJS_ul_li_index01.html
  クリックされた li のインデックス値。
  
• TestJS_querySelectorAll_li02.html
  クリックされた li のインデックス値。
  ul-li-ul-li のようにネストする場合。querySelectorAll() のサンプル。

JavaScript で li リストを作成する

• TestJS_ul_li_create01.html
  ul,liのリストをJavaScriptで作る。
• TestJS_table_create_textarea01.html
  テキストデータを ul,li の HTML に変換する。
  JavaScript ツールサンプル (1)
• TestJS_ul_li_create_color01.html
  ul,liの色リストをJavaScriptで作る。
• TestJS_color_select_li02.html
  色選択のサンプル。ラジオボタン(input type="radio")で作った例。 ラジオボタンのチェックマークを非表示にし、選択された色を強調表示する。
  inputタグ
  

li 要素を並べ替える

• TestJS_sort_ul_li_01.html
  li 要素の textContent の文字列を見て並べ替える。
  文字列の大小を比較する
  データを並べ替える (ソート)

li のテキストを入力する

ツリー表示

関連

• HTML ul,ol,li タグ
• HTML ul,ol,li タグ: JavaScript ツリービュー
• JavaScript: draggable 属性でドラッグ操作する