ボタンをクリックすると、別のHTML要素AとBが切り替わるというJavaScriptを作りたい

Question

###前提・実現したいこと
ボタンをクリックすると、別のHTML要素AとBが切り替わるというJavaScriptを作りたいと考えています。

###発生している問題・エラーメッセージ

ボタンをクリックすることで他の要素AとBをループさせるというのは、toggleで出来ると勉強しました。

var box = document.querySelector('.box');
box.addEventListener('click', function(){
box.classList.toggle('move');

その勉強をした際、例としてあげられていたの（上例）は、「classList」を使ってtoggleによって対象のHTML要素のCSSを切り替える技でした。しかし今回私は、CSSではなくHTMLそのものを切り替えたいと考えています。

その場合、どのように行うのがよろしいのでしょうか？

###該当のソースコード

###試したこと
そもそもどのように検索したら良いのかもわからない状態でしたので、自分で書いたコードはない状態です。強いて言えば前述の例を元に編集したものを試してみましたが、classList以外のものを知らない以上、ここに掲載できるほどのものはなにもありません。

何かヒントを頂けましたらありがたいです。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[Li-on]

ありがとうございます、そしてすみません！　編集しました！

Answer 1

こんな感じでしょうか
Element.innerHTML - 要素のHTMLを取得、変更する

Comments

[Li-on]

ありがとうございます。これも試してみます

Answer 2

element.insertAdjacentHTML とか。

<div class="box">[ click ]</div>
<div class="a">
	<div class="b">.b.b.b.b.b.b.b.b.b.b.b.b.b.b.b.b.b</div>
	<div class="c">.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c</div>
</div>

.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!' );
	}
} );
```**動くサンプル：**[https://jsfiddle.net/yrn5mnab/1/](https://jsfiddle.net/yrn5mnab/1/)

Comments

[Li-on]

ありがとうございます。そもそもCSSのこういった使い方を知りませんでした。
いろいろわからないことが多いのですが、逆に自分で調べられそうな取っ掛かりが幾つかできましたので、一旦自習してみます！