wrapの使い方について

Question

前提・実現したいこと

JSを使って、humbergerをクリックした時に、下記のul,liなどを追加するようなコードを書こうと考えています。

すでに動いているかどうか確認ができず質問しました。
内容は
確認方法と正しいコードをかけているか、
「wrapの使い方としてセレクタの前後に付与＝すでにある親要素や子要素にclassを付与できない認識が正しい」
のかについてです。
※HTMLにはすでに「bg-li_white」はすでに書いています。


※jqについてすでに調べ書いていますが、気になり質問しています。

該当のソースコード

<header class="header">
        <div class="inner header-inner">
            <h1 class="header-ttl">
                <img class="img-logo" src="./image/Logo.png" alt="">
                <p class="logo-text">ユアコーディング</p>
            </h1><!-- /.header-ttl -->
            <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
                <span class="humburger__line"></span>

              </button>
            <nav class="nav">
                <ul class="header-list">
                    <li class="header-item"><a href="#">特徴</a></li><!-- /.header-item -->
                    <li class="header-item"><a href="#">価格</a></li><!-- /.header-item -->
                    <li class="header-item"><a href="#contact-link">問い合わせ</a></li><!-- /.header-item -->
                </ul><!-- /.header-list -->
            </nav><!-- /.nav -->
            <div class="cmn-link header-link">
               <a href="#contact-link">お問い合わせ</a>
            </div><!-- /.cmn-link -->
        </div><!-- /.inner -->
    </header><!-- /.header -->
 <div class="bg-li_white">
            <div class="menu-li_open">
                <ul class="menu-list">
                    <li class="menu-item"></li>
                    <li class="menu-item"></li>
                    <li class="menu-item"></li>
                </ul>
                </div>
 </div><!-- /.bg-li_white -->

.header {
  background-color: #FFFFFF;
  height: 94px;
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  -webkit-box-shadow: 0px 3px 6px #00000029;
          box-shadow: 0px 3px 6px #00000029;
}

.header .header-inner {
  width: 1022px;
  margin: 0 auto;
  padding: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
}

.header .header-inner .header-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header .header-inner .header-ttl .img-logo {
  width: 55px;
  height: 55px;
}

.header .header-inner .header-ttl .logo-text {
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
  margin-left: 16px;
}

.header .header-inner .humburger__line {
  display: none;
}

@media print, screen and (max-width: 1024px) {
  .header .header-inner .humburger__line {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 18px;
    height: 2px;
    background-color: #333;
    -webkit-transition: inherit;
    transition: inherit;
  }
  .header .header-inner .humburger__line ::before {
    top: -5px;
  }
  .header .header-inner .humburger__line ::after {
    top: 5px;
  }
}

.header .header-inner .nav .header-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header .header-inner .nav .header-list .header-item > a {
  font-weight: bold;
}

.header .header-inner .nav .header-list .header-item + .header-item {
  padding-left: 46px;
}

.header .header-inner .nav .header-link {
  width: 155px;
  height: 37px;
}

.header .header-inner .nav .header-link > a {
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
}

$(function(){
  
 /*  $('#js-humberger').on('click', function(){
    $('#js-nav').slideToggle(300);
  }) */
  $('.button').on('click',function(){
    //bg-li_whiteの親要素付与
    $('.bg-li_white').wrapInner(' <div class="menu-li_open">')
    $(".bg-li_white").wrapInner('<ul class="menu-list"></ul>')
    $('menu-item').wrapAll('<ul class="menu-list"></ul>')

試したこと

wrap

wrapAll

wrapInner

調べ、実際にコードを書いています。

ご指導いただけると幸いです。何卒よろしくお願いいたします。

Answer 1

確認方法

wrapメソッドが動作していることの確認の方法という理解でいいでしょうか？
開発者ツールを開き、適切に要素が生成されているかを観察するとよいでしょう。
Elementsタブで要素を右クリックすると、要素の変更に対してブレークポイントを設定できるので、それで確認してもいいかもしれないです。

---

正しいコードをかけているか

エラーは出ていないようです。
想定通りに動作しているかどうかについては、 第三者よりもfree_tekuさんの方がわかることかと思います。
ただ、挿入されている要素によってHTMLの文法違反となっているので、そういう意味では正しくないと思います。

---

「wrapの使い方としてセレクタの前後に付与＝すでにある親要素や子要素にclassを付与できない認識が正しい」

前段は「wrapメソッドが、そのjQueryオブジェクトが指す要素の前後に開始タグと終了タグを挿入する」という意味でしたら、おおむねご認識の通りです。
後段は「wrapメソッドが、すでにある親要素や子要素のclass属性を変化させない」という意味でしたら、ご認識の通りです。

---

なお、ご存知の上でのご質問かと思いますが念のため、ご提示のコードではwrapメソッドは使われていないようでした。
また、コメントされている「bg-li_whiteの親要素付与」という内容と、実際の動作が異なるように見えること、$('menu-item')が存在しないこと、などが気になりました。

Comments

[free_teku]

Lhankor_Mhyさん、ご回答ありがとうございます。
EX.bg-li_whiteのみをHTMLに書きその後を上記のように書く場合は、
$('.bg-li_white').wrapInner(' <div class="menu-li_open">');
$(".menu-li_open").wrapInner('<ul class="menu-list"></ul>');
$（'.menu-list’).prepend('<li class="menu-item"></li>');
$（'.menu-list’).append('<li class="menu-item"></li>', '<li class="menu-item"></li>');

上記の書き方はよろしいでしょうか？

恐れ入りますが、よろしくお願いいたします。

[Lhankor_Mhy]

たぶん、期待した動作をするんじゃないかと思いますが、ご自分で試した方が早くないですか？
何かご不明の点がありますか？

[free_teku]

結論、試しましたが、うまくいきませんでした！これから仕事のため、本日の夜に内容を更新します。伝え足らずで、申し訳ありません