jQueryでHTML要素を作成

<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a> f:id:TomozQ:20210821104100j:plain

jQuery備忘録 Vol.1

ご無沙汰になってしまいました。今回は業務中に使用したjQueryの備忘録となっています。

全く更新していなかったのですが、ちょこちょこアクセスがあるようで・・・ありがとうございます。

頑張って更新していきますので、お役に立てればと思います。

index.html

<body>
  <div>
    <p>ul要素の中にliタグを生成する。</p>
    <ul>
      
    </ul>
  </div>
  <script>
    $(function(){
      const el = $('<li>', {id: 'created_li', class: 'created_li', text: 'liタグが生成されました。',})
      $(el).appendTo($('ul'))
    })
  </script>
</body>

f:id:TomozQ:20210821101239p:plain

まずはli要素を作って変数に入れます。

const el = $('<li>', {id: 'created_li', class: 'created_li', text: 'liタグが生成されました。',})

$(要素, プロパティ)としてli要素を作ります。何も難しいことはないですね！普通にhtmlのタグを書くようにそれぞれ指定してあげればいいだけです！

そうしたら表示したい箇所にappend!!

$(el).appendTo($('ul'))

$(作成した要素)をappendTo(ここに表示したい！！) f:id:TomozQ:20210821101254p:plain

el.appendTo($('ul'))

これでもいけますね。

これここで一回しか使わないんだったらわざわざ変数に入れる必要もないですよね。1行でやると

$('<li>', {id: 'created_li', class: 'created_li', text: 'liタグが生成されました。',}).appendTo($('ul'))

これでいけちゃいますね！

ちなみにみなさんjQueryの要素の指定は完璧ですかね？参考までにいくつか載せときますね

$('div') //タグで取得
$('.hoge') //クラスで取得
$('#fuga') //IDで取得
$('input[name="hogefuga"]') //特定のname属性がついたinput要素を取得

他にもいろんな取得方法があるので是非探して使ってみてください。

久々の投稿なので・・・

<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Practice</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  </head>
  <style>

  </style>
  <body>
    <div>
      <p>ul要素の中にliタグを生成する。</p>
      <ul>
        
      </ul>
      <button id='asonjau'>久々だから遊んじゃう</button>
    </div>
    <script>
      $(function(){
        //ボタンクリックで...
        $('#asonjau').on('click', function(){
          //要素作成
          const el = $('<li>', {id: 'created_li', class: 'created_li', text: 'liタグが生成されました。',})
          
          //append!!
          $(el).appendTo($('ul'))
        })
      })
    </script>
  </body>
</html>