innerHTMLが反映されない

innerHTMLを用いて、htmlの内容を書き換えるという操作を行いたいのですが、反映されず困っています。

document.getElementById("aaa").innerHTML ="こんにちは";

どこのコードに問題があるのでしょうか？

大変恐縮ですが、ご回答頂けると幸いです。

よろしくお願いします。

追加分

      <div class="press-news">
        <img src="box img/box sidebar/press-news.gif" alt="">
        <p class="dates">2013年8月31日</p>
        <p id = "super">
          * Fujii LENA Love Selection*
        </p>
        <p class="borderline">
          10月中旬販売開始
        </p>
        <p class="dates" >2013年8月31日</p>
        <p>
          * Fujii LENA Love Selection*
        </p>
        <p class="borderline">
          10月中旬販売開始
        </p>
        <p class="dates">2013年8月31日</p>
        <p>
          * Fujii LENA Love Selection*
        </p>
        <p class="borderline">
          10月中旬販売開始
        </p>
      </div>

JavaScript

<script>
function () {
  document.getElementById("super").innerHTML = "こんにちは";
}
</script>
コード

HTML

        <div class="bar">
          <form>
            <input type="text" id="aaa" name="namae" size="20" maxlength="20">
            <input type="button" value="送信">
          </form>
          <form>
            <input type="text" id="bbb" name="namae" size="20" maxlength="20">
            <input onclick="xxx()" type="button" value="送信"></form>
        </div>

コード

CSS

.bar{
  width:210px;
  height:350px;
  font-size:14px;
  display:inline-block;
  background-color:#fff2de;
}

コード

Javascript

<script>
    function xxx() {
        document.getElementById("aaa").value = document.getElementById("bbb").value;
        document.getElementById("aaa").style.color = "red";
        document.getElementById("aaa").innerHTML ="こんにちは";
    }
</script>

think49

2017/05/01 14:17 編集

http://co-712.it.3919.com/ で公開されている藤井リナの画像ですが、肖像権は大丈夫でしょうか。藤井リナ本人と写真の著作権者に許諾を得る必要があると思われますが…。

revoiot

2017/05/01 14:52 編集

こちらはwebsite作成の練習用として作成していますし、商用利用はもちろんするつもりはございません。よろしくお願いします。語弊を招く書き方をしてしまい、大変失礼いたしました。

think49

2017/05/01 15:16

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

回答4件

input要素は「空要素」なので innerHTML に値を入れても表示に反映されません。

【input 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

【element.innerHTML - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

投稿2017/05/01 13:15

kei344

総合スコア69407

innerHTML の仕様

「空要素を innerHTML で書き換えようとした場合の仕様上の動作はどうなっているのか」と思って確認してみましたが、HTML では特に言及がないですね。
XML文書なら "InvalidStateError" DOMException を返すかもしれませんが…。

2.3 Extensions to the Element interface - DOM Parsing and Serialization

innerHTML がダメなら outerHTML を使えばいいじゃない

完全にネタコードですが。

input.value を outerHTML で書き換える - JSFiddle

HTML
1<style>
2.foo {
3  color: red;
4}
5</style>
6</head>
7<body>
8<div class="bar">
9  <form>
10    <input type="text" id="aaa" name="namae" size="20" maxlength="20">
11    <input type="button" value="送信">
12  </form>
13  <form id="sample">
14    <input type="text" id="bbb" name="namae" size="20" maxlength="20">
15    <input type="submit" value="送信">
16  </form>
17</div>
18<script>
19'use strict';
20document.getElementById('sample').addEventListener('submit', function handleSubmit (event) {
21  var input = document.getElementById('aaa');
22
23  input.classList.add('foo');
24  input.outerHTML = input.outerHTML.replace(/value="[^"]*"/, '').replace(/(?=\/?>)/, 'value="こんにちは" ');
25  event.preventDefault();
26}, false);
27</script>

innerHTML で文字列を挿入する是非について

innerHTML はHTMLタグを上書き挿入するプロパティであって、文字列を挿入するのには適していません。
innerHTML は <>& をエスケープしなければ、文字列として挿入できません。
文字列を挿入するのなら、textContent や createTextNode() を使用して下さい。

HTMLInputElement.prototype.value

input要素ノードは HTMLInputElement を継承している為、HTMLInputElement.prototype.value を使用できます。
HTMLInputElement.prototype.value は innerHTML と違い、<>& をエスケープする必要がありません。
各種要素ノードには便利なプロパティ/メソッドが用意されているので、要素別に適切な機能を活用して下さい。

HTMLInputElement - Web API インターフェイス | MDN

SyntaxError: Unexpected token (

JavaScript
1function () {
2  document.getElementById("super").innerHTML = "こんにちは";
3}

上記コードは関数宣言でも関数式でもない為、SyntaxError の例外を返します。
関数宣言は名前が必須であり、関数式は function キーワードから始まる事は出来ません。

Re: revoiot さん

投稿2017/05/01 14:01

編集2017/05/01 15:24

think49

総合スコア18162

退会済みユーザー

2017/05/02 08:53

伝わらないだろうなぁ。。。ｗ

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

ベストアンサー

javascript
1document.getElementById("aaa").value ="こんにちは";

参考：http://faq.creasus.net/02/0801/

投稿2017/05/01 12:57

編集2017/05/01 13:01

yuki84web

総合スコア1857

revoiot

2017/05/01 13:01

ご回答ありがとうございます。今回、どうしてもinnerHTMLを使いたいのですが、その場合どうコードすればよいでしょうか？大変恐縮ですが、よろしくお願いします。

yuki84web

2017/05/01 13:04

それならinputなどを使わずpなどに変えて下さい

revoiot

2017/05/01 15:02

ご回答いただきありがとうございます。inputをつかわず、pでHTML内容変更することを試みましたが、うまくいきませんでした。質問画面に写真とHTML追加させていただきました。 classではなく、idを使用し、inputでなく、pを使用しましたが、preview画面に変化はありませんでした。なぜpを使用しても、変化がないのでしょうか？大変恐縮ですが、ご回答いただけると幸いです。よろしくお願いします。

yuki84web

2017/05/01 15:17

開発コンソールでJSのinnerHTMLの行にブレークポイントを付けて実行してみると分かると思いますが、そもそも追加した記述では関数が呼ばれていませんので、何無しらのイベントで実行されるようにしてください。

miyabi_pudding

2017/05/02 11:10 編集

どうしてinnerHTMLにこだわるのでしょうか？もともと、pは、formで内容を送信するような仕様ではありません。どうしてもp（というかinnerHTML）を使いたいのであれば、 form送信時に、pの中身も付与して送信するようにしてください。 form javascript 送信時、とか、form javascript submit とかで、Google先生に聞いてみましょう。もしくは、<input type="hidden" id="aaa"> などで、input要素を用意しておき、 pの中身が変わったときに、inputのvaleを変更するようにしてもいいかもしれません。そして、yuki84webさんの言うとおり、関数が実行されてないですね。

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

こうするとわかりますが、ブラウザによって戻り値が違います。

javascript
1<input type="text" id="aaa" name="namae" size="20" maxlength="20">
2<script>
3var aaa=document.getElementById("aaa");
4aaa.innerHTML="こんにちは";
5for(var i in aaa){
6  if(i.match(/^inner/)) console.log(i+":"+aaa[i]);
7}
8</script>
9

innerHTMLもinnerTextも「こんにちは」が返る

Firefox

innerHTMLは「こんにちは」が返るが、innerTextは空

chrome

innerHTMLもinnerTextも空

つまりinnerHTMLは書き換えられるが参照できたりできなかったりして
しかもそれがHTMLに反映されることはないということです

ちなみに

javascript
1console.log(aaa.firstChild);

すれば、どのブラウザでも「こんにちは」を得ることができます。

投稿2017/05/01 13:26

編集2017/05/01 13:32

yambejp

総合スコア114814

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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