【JavaScript】マウスオーバーした要素に新規要素を追加する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでマウスオーバーした要素に新規要素を追加する方法をご紹介しています。

JavaScriptでマウスオーバーした要素に新規要素を追加するにはどうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

マウスオーバーした要素に新規要素を追加する処理を作成します。下記にデモを用意しましたので、動作をご確認ください。Targetと表示された緑色の要素にマウスカーソルを乗せると新規要素が追加されます。

See the Pen 7511 by ryohei (@intotheprogram) on CodePen.

上記デモの通り、マウスオーバーした要素の子要素に新規要素が追加されます。もし隣接した要素に追加したい場合は、下記の記事を参考に要素を追加する処理を変更してください。

マウスオーバーした要素に新規要素を追加する

デモで使用しているソースをご紹介します。HTMLはそのままですね。マウスカーソルが乗った、外れたの判定にはmouseenterとmouseleaveのイベントを使用しています。

HTML

<div class="target">Target</div>

JavaScript

const obj = {
    target: document.querySelector('.target'),
    init: function(){
        this.target.addEventListener('mouseenter', this.add, false);
        this.target.addEventListener('mouseleave', this.remove, false);
    },
    add: function(){
        this.insertAdjacentHTML(
            'beforeend',
            //ここに追加する新規要素を指定する
            '<ul class="target__list"><li><a href="#item1">Item1</a></li><li><a href="#item2">Item2</a></li></ul>'
        );
    },
    remove: function(){
        this.querySelector('.target__list').remove();
    }
}
obj.init();

JavaScriptの2行目にあるobjのtargetに指定した要素の子要素にul要素が追加されます。ul要素にはtarget__listというclassを持たせています。

要素（HTMLタグ）の追加にはinsertAdjacentHTMLを使用してます。ソース内のコメントの箇所に追加したい要素やコンテンツを指定してご利用ください。

マウスカーソルを乗せるとHTMLは下記のように変化します。

<div class="target">
    Target
    <ul class="target__list">
        <li><a href="#item1">Item1</a></li>
        <li><a href="#item2">Item2</a></li>
    </ul>
</div>

参考にしていただければと思います。

最後に

マウスオーバーでclassを付ける、classを外すという処理はよく使用しますが、要素を追加する処理は初めて作ったような気がします。今回のケースでは対象がユニークな要素だったのでオブジェクト内でtargetのclassを持つ要素を取得していますが、複数の要素に適用したい場合は引数で渡して要素を取得した方が使いやすいと思うので、興味がある方はぜひカスタマイズしてみてくださいね。

以上、JavaScriptでマウスオーバーした要素に新規要素を追加する方法のご紹介でした！