[JavaScript]リロードなしでHTML表記をロード時に戻す

  • 公開日:2016/10/13
  • 最終更新日:2016/10/12
この記事は最終更新日から2年以上が経過しています。

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;
}

参考サイト
http://okwave.jp/qa/q1523858.html