JavaScriptでhtml要素を書き換えるサンプルコード
JavaScriptで要素を書き換えるサンプルコードです。
JavaScriptでhtml要素を書き換えるサンプルコード（idで指定）
要素をidで指定して書き換える場合です。htmlは下記とします。
<p id="aaa" onclick="sample_change_html1()">くじ←ここをクリック</p>JavaScriptは下記となります。
function sample_change_html1(){
document.getElementById('aaa').outerHTML = '<p id="bbb" onclick="sample_change_html2()">あたり←ここをクリック</p>';
}
function sample_change_html2(){
document.getElementById('bbb').outerHTML = '<p id="aaa" onclick="sample_change_html1()">くじ←ここをクリック</p>';
}補足：.outerHTMLと.innerHTMLの違い
.outeHTMLは対象要素のタグそのものも含めて取得します。.innerHTMLは対象要素のタグの内側のみを取得します。上記のJavaScriptのサンプルのように、タグ自体も書き換えたい場合は.outerHTMLを使い、タグの内側だけを書き換えたい場合は.innerHTMLを使います。
実装サンプル
下記が実装したものです。クリックすると切り替わります。
くじ←ここをクリック