innerHTMLの処理する順序を逆にしたい

タイトル通りです。どういうことかといいますと、通常innerHTMLは既存のhtmlをjavascriptで書き換えますが、そうではなくjavascriptで何かを表示させたあと、そこにhtml本文で表示させたいということです。説明わかりにくくてすいません。具体的には

html
1<div id="ih"> 
2<h1>こんにちは</h1>
3<p>今日もいい天気ですね</p>
4<p>さようなら</p>
5</div>

上記のhtmlで表示される部分をjavasceriptで「今日は雨ですね」の一行だけに変えたい場合

javascript
1document.getElementById("ih").innerHTML = "<p>今日は雨ですね</p>"

のようになるかと思いますが、そうではなく今日は雨ですねを表示させたあと（正確にはページがロードされてから２秒後）に「今日は雨ですね」部分に変わってhtml部分を読み込ませたいです。html部分と上記javascript内p要素部分を逆に書けばいいだけの話なのですが、私が今実際に作っているプログラムは上記でいうhtml部分がかなり長く、改行やダブルクオーテーション＆シングルクオーテーションの問題を細かく手直しするにはあまりにも時間がかかってしまうと考えたため、このような質問をさせていただきました。何か良い案をご存知の方がおりましたら、回答してくださればうれしいです。
よろしくおねがいします。

###補足情報
その他追記して欲しい情報等がありましたら、「追記・修正依頼」にて返信をお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

やりたいことは、下記のようなことですか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="Content-Script-Type" content="text/javascript">
6    <title>JavaScript テスト</title>
7</head>
8<body>
9    <div id="ih">
10        <h1>こんにちは</h1>
11        <p>今日もいい天気ですね</p>
12        <p>さようなら</p>
13    </div>
14    <script type="text/javascript">
15        var ih = document.getElementById("ih").innerHTML;
16        document.getElementById("ih").innerHTML = "<p>今日は雨ですね</p>";
17        function setih() {
18            document.getElementById("ih").innerHTML = ih;
19        }
20        setTimeout("setih()", 3000);
21    </script>
22</body>
23</html>

ES6以降のテンプレートリテラルを使えば、下記のようにも書ける。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="Content-Script-Type" content="text/javascript">
7    <title>JavaScript テスト</title>
8</head>
9<body>
10    <div id="ih">
11        <p>今日は雨ですね</p>
12    </div>
13    <script type="text/javascript">
14        const ih = `
15        <h1>こんにちは</h1>
16        <p>今日もいい天気ですね</p>
17        <p>さようなら</p>
18        `;
19        function setih() {
20            document.getElementById("ih").innerHTML = ih;
21        }
22        setTimeout("setih()", 3000);
23    </script>
24</body>
25</html>

投稿2019/10/31 16:10

編集2019/10/31 16:45

hatena19

総合スコア34073

firewater

2019/11/01 14:27

解決しました！ありがとうございました。ベストアンサーとさせていただきます。

行動規範の内容に同意します

いちばん手早くするには、HTMLは事前に作成しておいて表示だけ切り替えるという方法が良いかと思います。

html
1    <div id="initial">
2      <p>今日は雨ですね</p>
3    </div>
4    <div id="ih" style="display: none">
5        <h1>こんにちは</h1>
6        <p>今日もいい天気ですね</p>
7        <p>さようなら</p>
8    </div>

javascript
1setTimeout(function(){
2  document.getElementById('initial').style.display="none";
3  document.getElementById('ih').style.display="block";
4}, 2000);