[JavaScript]リロードなしでHTML表記をロード時に戻す
- 公開日:2016/10/13
この記事は最終更新日から8年以上が経過しています。
JavaScriptでいろいろ操作したHTMLをリロードせずにロード時の表示状態に戻す方法です。
戻したい箇所のロード時のHTMLを覚えておいて、セットするだけです。
例)body内をボタン押下で元に戻す。
〈JavaScript〉
// 初期HTML記述をセット var defaultHTML; function DefaultSave() { defaultHTML = document.body.innerHTML; } // HTML記述を初期状態に戻す function HTMLRestore() { document.body.innerHTML = defaultHTML; }
〈HTML〉
onloadで初期HTMLを保存する関数を呼び出します。
<body onload="DefaultSave()">
ボタン押下で初期状態に戻す関数を呼び出します。
<input type="button" value="元に戻す" onclick="HTMLRestore()">
body全体ではなく、「main_wrap」というid内だけ元に戻したい場合はJavaScriptを以下のようにすれば実現できます。
// 初期HTML記述をセット var defaultHTML; function DefaultSave() { defaultHTML = document.getElementById('main_wrap').innerHTML; } // HTML記述を初期状態に戻す function HTMLRestore() { document.getElementById('main_wrap').innerHTML = defaultHTML; }