フォルダ
[JavaScript]リロードなしでHTML表記をロード時に戻す
- 公開日：2016/10/13
この記事は最終更新日から7年以上が経過しています。
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;
}