質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • JavaScript

    19879questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11122questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4979questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • TypeScript

    474questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • ECMAScript

    139questions

    ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

innerHTMLの謎の挙動について。

受付中

回答 5

投稿

  • 評価
  • クリップ 1
  • VIEW 737

WeilSpinor

score -27

innerHTMLの謎の挙動について。

innerHTMLについて紹介されているいくつかのブログで、この仕様に反した謎の挙動をしており、「それを当たり前のものとして紹介している」のを発見し、どういうことなのか知りたく質問させていただきました。

まず

innerHTMLは、その名の通り、

「element内部のHTML」=「開始タグと終了タグで囲まれた領域」

という意味です。
‘’’html
<div id=“hoge” style=“background-color:red”>
</div>
‘’’
‘’’javascript
const hoge = getElementById(“hoge”);
hoge.innerHTML = “<button id=“btn”>ボタン</button>”
‘’’
と書けば、当然、HTMLは以下のように書き換わり、divの子供としてbuttonが付け加わります:
‘’’html
<div id=“hoge” style=“background-color:red”>
<button id=“btn”>ボタン</button>
</div>
‘’’

「赤いdivエレメントの中にボタンが設置されている」

感じになるはずです。

謎の挙動について

しかし、innerHTMLについて紹介されているいくつかのブログで、この仕様に反した謎の挙動をしており、「それを当たり前のものとして紹介している」のを発見しました。その謎の挙動とは、以下のようなものです:

innerHTML内にエレメントを記述すると、「自分自身が」その記述したエレメントに取って代わる

つまり、上の例ですと、

「id名がhogeの赤いdivエレメント」だったものが、
「id名がbtnのbuttonエレメント」に、
『変身』してしまう

というものです。

この謎の挙動を紹介していたサイトとは、以下になります:

どういうことでしょうか?
最近Javascript やhtmlの仕様が大きく変わったとかでしょうか?mdnのリファレンスなどを読みましたがよくわかりませんでした。

最悪、謎の挙動に関しては謎のままで構いません。
とりあえず、冒頭に書いた挙動が正しいということが確認できれば、それでいいです。

ご回答よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2019/04/13 14:05

    WeilSpinorさんは以前から回答がついたら、補足要求は無視し続ける傾向がありました。
    「解決に直接関係がない事」と切り捨てているのだと思われますが、それが質問をあいまいにして回答しづらい状況を産んでいる事にも気が付いていないのでしょう。

    キャンセル

  • Y.H.

    2019/04/13 14:24

    結局そのサイトは追記いただけないのでしょうか?
    質問に記載されている通り検証されて記載の挙動をしているのであれば私も興味あります

    キャンセル

  • 退会済みユーザー

    2019/04/14 02:48

    複数のユーザーから「問題・課題が含まれていない質問」という意見がありました
    teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
    「編集」ボタンから編集を行い、質問の意図や解決したい課題を明確に記述していただくと回答が得られやすくなります。

回答 5

+5

一つの可能性

この謎の挙動を紹介していたサイトとは、以下になります:

「以下」というサイトですね。
私には読めませんが、憶測で回答しましょう。

WeilSpinorさんがinnerHTMLouterHTMLを読み間違えているからです。

トライアルアンドエラー (trial and error)

私が冒頭で述べた「正しいと私が思う挙動」が「実際に正しいこと」は、既に実験によって確認しております。

トライアルアンドエラーをしたのなら、その事実が全てです。
つまり、次のいずれかの可能性しかありません。

  • WeilSpinorさんが読み間違えている
  • WeilSpinorさんが試したトライアルアンドエラー結果の解釈が間違っている
  • WeilSpinorさんが読んだサイトが間違っている

回答の効率

WeilSpinorさんが読み間違えたかもしれないサイトの情報源がなく、WeilSpinorさんが試した内容もない。
この状況で回答者はどうやって間違いを見つけることが出来ますか。
tanat さんが回答した内容も、質問で共有されなければ、回答に生かされる事はないのです。

はっきりいえば、確定情報の少ない質問に回答するのは時間の無駄です。

Re: WeilSpinorさん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/13 15:46

    トライアンドエラーなんて英語はないのでちゅ。
    トライは動詞だけど、エラーは名詞なのでちゅ。

    キャンセル

  • 2019/04/13 20:56

    looperさん
    ご指摘ありがとうございます。
    親記事を修正しました。

    キャンセル

+4

Googleで"innerHTML"で検索して引っかかるブログサイトを検索結果の2ページ目まで一通り確認しましたが、そのような解説をしているサイトは一つもありませんでした。

質問文にもサイトが書いていないことから、そのようなブログがあるという話がであると思われます。質問が虚偽であるならば回答も虚偽にしなければつじつまが合わない、という謎の理論により、私もをつきます。

質問への回答: 謎の挙動が正しいです。

信じられないのであれば、実際に試してください。ちょっとコードを書いて、ブラウザの開発ツールから確認すればいいだけですので、エンジニアなら誰でもできることです。実際に己の目で動作を確認し、この回答が間違っている事を確信している人だけが、この回答への低評価をお願いします。

技術的に未熟で、確認の仕方を調べてもよくわからないというエンジニアの卵の人がいれば、その旨を別の質問に挙げてください。コメントで質問されても私は答えません。自分で動作を確認しようともしない、確認の仕方を調べようともしない人は、エンジニアになる資質が全くありませんので、別の道に進まれることをお勧めします。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/13 13:21

    ご回答ありがとうございます。

    私が冒頭で述べた「正しいと私が思う挙動」が「実際に正しいこと」は、既に実験によって確認しております。
    そもそも、それを確認していないにも関わらず、このように自信満々に断言形で語ることをする人は、(詐欺師でもない限り)あまりいないのではないでしょうか?

    ちなみに、
    URLの記載漏れは私のミスですが、それをもって虚偽とまで解釈されてしまうとまで予想してはおりませんでしたが、世の中にはそのように受け取る方もいらっしゃるということで理解して、今後注意していきたいと思います。

    キャンセル

  • 2019/04/13 13:35

    >hoge.innerHTML = “<button id=“btn”>ボタン</button>”
    「そもそもJavaScriptとして動かないコード」を提示されて「既に実験によって確認しております」っておかしいですよ。構文エラー起きるコードを以てどうやって検証できるんですか?

    キャンセル

  • 2019/04/13 13:40

    あなたが確認したかどうかは質問文に一切書いていません。私にはその旨を知る方法ありません。

    あなたが「実際に正しいこと」を確認しているのであれば、結局「正しい」「正しくない」の二択があなたの聞きたいことでは無いと言うことですか?そうであれば、あなたが聞きたいのは一体何ですか?

    自分が確認したブラウザには不具合があり、間違った動作をしているかもしれない、または、調べることができない他のブラウザの方には不具合で異なる動作をするかも知れない、ということを確認したいのですか?そうであれば、あなたが確認したという環境(OSやブラウザ、および、それぞれのバージョン)すべてを明記し、あなたでは調べることが難しい環境(たとえば、Macを持っていなかったら、MacのSafariの動作を調べるのは難しいでしょう)を聞けば良いでしょう。そうしたら、その環境を持っている人が調べて回答してくれると思います。

    それとも、あなたが行った確認方法があっているのかわからないという事ですか?そうであれば、どのような方法で確認したのかを細かく書いてその方法で確認しても問題ないのか、抜けが無いのかを聞けば良いでしょう。

    あなたが本当に聞きたいことを「質問文」にきちんと書いてください。あなたの質問は「俺の従姉妹の親友の父親の上司の息子の同級生が通っている塾の先生をやっている大学生が片思い中のコンビニのバイトの娘の兄が次の元号が『安久』になるという謎の主張をしているが、正しいのか?」と聞いているようなもので、それには「正しくない」としか答えようがないものです。

    キャンセル

+2

とりあえず、冒頭に書いた挙動が正しいということが確認できれば、それでいいです。

自身で確認したんですよね?それなら、それが全てです。それでいいです。
それであなたの今後の人生に何か不都合が起きても誰の責任でもありません。
何かあっても自身の責任において自己満足で解決としておいてください。
質問する必要ないです。質問する時間も労力も無駄です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

innerHTMLの仕様を調べてみましたが、
DOM Standard
↑の中にはなく、↓こちらにあるようでした。
DOM Parsing and Serialization
この文書はWorking Draftであるようですから、正式な仕様として採択には至っていないと思います。

きちんと調べていませんが、もともとinnerHTMLはIEの独自拡張という位置づけであったかと記憶しています。実際に Netscape では後期のバージョンになるまで使えなかったと思います。
DOM の仕様に採択されなかったため、「innerHTMLは将来的に消えるかもしれませんので非推奨のプロパティです」とかなり昔に読んだ何かの本に書いてあったような記憶があります。(その後、HTML5の仕様に名前が載ったので、もう消えることはなくなったのではないかな?)

なので、「DOM API として正しい振る舞いは何か」という問いには、「実装による」という身もフタもない答えもある意味では正しいのかな、と思いました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/15 19:38

    otolabさんと内容かぶってました。ちゃんと読んでなかったです、すみません。

    キャンセル

  • 2019/04/15 21:33

    otolab さんの回答は「DOM0(非標準)」で古いMDN情報を基にしたものなので、仕様としては Lhankor_Mhy さんの回答が正解だと思います。
    (現在では、https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML も DOM Level 0 ではなくなっています)

    従来のinnerHTMLは非標準でしたが、後追いで標準化されています。
    仕様は現在の実装と矛盾がない範囲で策定されている為、詳細に仕様化されていない部分があります(例えば、タグ名の大文字/小文字の指定がなく、従来はブラウザごとに出力に差異がありました)。
    しかしながら、本質問に限定するなら、仕様には "Returns a fragment of HTML or XML that represents the element's contents." と明確に書かれていますので、それが答えだと思います。

    (余談)
    回答で問題に対する「直接的な答え」を掲示した場合、「答えだけ拾って解決へのアプローチ法を無視する質問者」がそれなりに多い気がしています。
    なので、あえて直接的な答えを書かない事がありますが、多種多様な回答が寄せられると、「答え」を寄せる回答者も出てきます。
    質問者は「答え」をベストアンサーに選んで終了し、解決手段は無視する、という現実が悲しいです。

    キャンセル

  • 2019/04/15 21:50

    コメントありがとうございます。
    正直、Working Draft の位置づけがよくわからなかったので、もごもごした書き方になったのですが、これも標準化されているという認識でいいのですね。

    (余談)については、安易に正解を書くのは質問者のためにならない、という私の回答へのご批判と読みました。
    この質問者は初心者であり、かつ、何がわかっていないのかわかってない方だと思います。そういった方にはドキュメントやリファレンス、あるいは入門記事をおすすめするのがいいのではないかと思っていますので、そのようにしました。
    この質問者に対して、公式のドキュメントを示すのはハードルが高いかもしれませんが、このどうしようもない質問への、私なりの皮肉だとお読みいただきたく。

    > 質問者
    はやくその記述をしているサイトを提示してください。

    キャンセル

  • 2019/04/16 13:35

    あ、DOM 0じゃなくなりつつあるんですね。勉強になります。

    DOM Parsing and Serializationということは、パーサの標準化の文脈なんですね。

    タグの閉じ忘れなどの処理など、ブラウザごとのノウハウだったHTMLのパース処理を標準化するという話だったはずなので「innerHTMLが標準化できなかった理由が解消する」という感じでしょうか。

    ちなみに、WDとは何かについてはこちら。
    https://www.kanzaki.com/w3c/process.html

    キャンセル

  • 2019/04/16 20:12

    otolab さん
    ありがとうございます。参考になります。

    しかし、これ、Editor's Draft 版でも大した変更もなさそうですし、なぜWD止まりにしてるんでしょうね?
    https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin

    キャンセル

+1

古い情報や間違った情報は普通に世の中に溢れているので、悩んだら信憑性の高い情報源にあたったほうが良いと思います。
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

可能ならDOMの仕様などを調べるのもおすすめですが、DOM0(非標準)だったはずなので、仕様には記述がないかも。

また、非標準の機能は「挙動が保証されていない」ので、そういう挙動をするブラウザもあるかもしれません(innerHTMLの挙動についてはたぶんナイと思いますが)。

確実性を求めるなら、非標準の機能以外の手段を使うのも良い方法だと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    19879questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11122questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4979questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • TypeScript

    474questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • ECMAScript

    139questions

    ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。