javascriptのdocument.write()を別の方法で記載したが機能しない

現在変数に入れたhtmlを

変数名 ab

画面上に出力したいと思い

document.wirte(ab)で記載しましたら問題なく出力されました

ですが

document.write(ab)は危険だと知り

document.innerHTML = ab;

で出力しようと思ったのですが

うまく出力されません

document.innerHTML = ab;
ではうまく機能しないのでしょうか

初心者の為,思考錯誤の結果こうなってしまったので
間違えている場所をご指揮的頂ければ幸いです

よろしくお願いいたします。

javascript
1
2  <script type="text/javascript">
3
4
5 var ab = '<select name="secondCategory" id="secondCategory" disabled="disanable">'
6
7                + '<option value="1">トップス</option>'
8                + '<option value="2"> ワンピース</option>'
9                + '<option value="3">ベビー・キッズ</option>'
10                + '<option value="4">小物・ゲーム</option>'
11                +
12                '</select>'
13
14  document.innerHTML = 'ab';
15
16</script>

Lhankor_Mhy

2020/07/03 04:19 編集

>document.write(ab)は危険だと知り私見ですが、ご質問の記述であれば、ユーザーからの入力は含まれないので危険ではないと思います。また、「初心者は入力の危険性を認識できないのだから document.write はすべてのケースで使うべきではない」という意見であれば、innerHTML も同様の理由で使うべきではありません。

nguyenseiji

2020/07/03 04:33 編集

ご連絡ありがとうございます InnnterHTMLのidに入れるHTMLのタグですが javascript領域の外で記載したらうまく機能しました document.getElementById("id名").innerHTMLについて完全に理解しました。ありがとうございます。

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

回答2件

ベストアンサー

おすすめはしませんがdocument.body.innerHTMLでbody直下に追加することはできます。
おそらく指定の場所に挿入したいと思われるので上の人の回答のように挿入したい要素にidを指定してgetElementByIdでそのidの場所を指定するといいと思います。

＊selectをあらかじめ指定個所に記述しておいて必要に応じてdisableとdisplay:noneつけたほうがいいような気がします。

投稿2020/07/03 04:14

gogoweb_ikeda

総合スコア1426

nguyenseiji

2020/07/03 04:32 編集

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

通常はdocument.wirte（ab）を使用します

<span id = 'test'>こんにちは</ span>
document.getElementById("test").innerHTML

投稿2020/07/03 03:19

timhu

総合スコア27

nguyenseiji

2020/07/03 03:29

ご連絡ありがとうございます今回の場合のように変数にidを設定したのですが可能でしょうか一応別の方法?で下記のコードを記載しましたがうまく機能しませんご指揮頂けると助かります abは変数になります <span id='test'>ab</ span> document.getElementById("test").innerHTML

m.ts10806

2020/07/03 03:55

エラーを確認してください。ブラウザ開発ツールのコンソール

nguyenseiji

2020/07/03 03:59

ご連絡ありがとうございますエラー、警告、ともに全て正常でしたもう少し調べてみます

nguyenseiji

2020/07/03 04:02

開発環境はvisual studio 2019になります

AkitoshiManabe

2020/07/03 04:29

> 通常はdocument.wirte（ab）を使用しますその「通常」は黎明期の話です。document.write() は文書木（well-formed markup）が破綻する可能性があるため、DOMで操作するのが現代の「通常」と思います。 DOMの innerHTML プロパティも記述されているので、回答したいのはどちら？と感じます。

nguyenseiji

2020/07/03 04:33 編集

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

あなたの回答