javascript - javascriptを使用したスパン内のhtmlコンテンツ

Question

基本的にリストとdivを含むスパンと5つの異なるhtml構造があります。

私は5つのボタンを持っています。各ボタンをクリックすると、スパンの内容がこれらの構造のいずれかに変更されます。

を使用するのと同じくらい簡単にできることを知っています

document.getElementById("a").innerHTML = "<div> A </div>";

しかし、20 ～ 30 行の html 構造がある場合、これが最善の方法ですか? または何か良い方法はありますか？

Answer 1

まず、あなたの例は無効です。adiv タグは、タグまたはタグの内部に入るべきではありませんspan。

挿入したい 5 つの HTML サンプルのそれぞれを JS で文字列にしてから、ユーザーがボタンの 1 つをクリックしたときに、innerHTML を使用してそれぞれのコンテナーに配置します。

Answer 2

そのようなボタンがたくさんある場合は、渡されたデータで呼び出すことができる関数を利用して、何度も何度も書き直す必要がないようにする必要があります。

function insertHTML(id, content) {
    document.getElementById(id).innerHTML = content;
}

次に、次のようにボタン項目に onclick 関数を配置できます。

<div class="button" onclick="insertHTML('idoftarget', '<div>html</div>')"></div>