質問: document.querySelector('.box'); box.addEventListener('click', function(){ box.classList.toggle('move'); ``` その勉強をした際、例としてあげられていたの(上例)は、「classList」を使ってtoggleによって対象のHTML要素のCSSを切り替える技でした。しかし今回私は、CSSではなくHTMLそのものを切り替えたいと考えています。 その場合、どのように行うのがよろしいのでしょうか? ### 該当のソースコード ### 試したこと そもそもどのように検索したら良いのかもわからない状態でしたので、自分で書いたコードはない状態です。強いて言えば前述の例を元に編集したものを試してみましたが、classList以外のものを知らない以上、ここに掲載できるほどのものはなにもありません。 何かヒントを頂けましたらありがたいです。 ### 補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報
回答: element.insertAdjacentHTML とか。 ``` [ click ] .b.b.b.b.b.b.b.b.b.b.b.b.b.b.b.b.b .c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c ``` ``` .box + .a > .c, .box.move + .a > .b { display: none; } .box + .a > .b, .box.move + .a > .c { display: block; } ``` ``` var box = document.querySelector( '.box' ); var a = document.querySelector( '.a' ); box.addEventListener( 'click', function() { box.classList.toggle( 'move' ); if ( box.classList.contains( 'move' ) ) { a.insertAdjacentHTML( 'afterend', 'true!' ); } else { a.insertAdjacentHTML( 'afterend', 'false!' ); } } ); ``` **動くサンプル:**