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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

1回答

1108閲覧

JavaScriptで置き換えたのを表示させたい

unity.hatu

総合スコア18

JavaScript

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

1グッド

1クリップ

投稿2020/01/18 08:08

したいこと

\nを</br>に置き換えて改行したい。
前回の続きなんですがDOMで表示させることはできましたが、表示する際に開業してほしいところ</br>と表示されてしまいます。
document.writeなら大丈夫ですが、何がおかしいのでしょうか?

スクリプト

javascript

1window.addEventListener('load', function() { 2 getTrainList(); 3}); 4 5function getTrainList() { 6 var url = 'URL'; 7 fetch(url) 8 .then(function (data) { 9 return data.json(); // 読み込むデータをJSONに設定 10 }) 11 .then(function (json) { 12 for (let i = 0; i <= 100; i++) { 13 var mdate = json[i].time; // jsonのtimeを読み込み→time 14 var massage = json[i].massage; // jsonのmassageを読み込み→massage 15 var now = new Date(mdate); 16 var year = now.getFullYear(); 17 var month = now.getMonth()+1; 18 var date = now.getDate(); 19 var hour = now.getHours(); 20 var munit = now.getMinutes(); 21 var second = now.getSeconds(); 22 var times = document.createElement('li'); 23 var massages = document.createElement('li'); 24 times.textContent = `${year}${month}${date}${hour}${munit}${second}`; 25 massages.textContent = `${massage}`.replace('\n', '</br>'); 26document.querySelector('.wrap').appendChild(times).classList.add('time'); 27document.querySelector('.wrap').appendChild(massages).classList.add('massage'); 28 } 29 }); 30} 31

##動作イメージ
したいこと

ああああ
いいいい

現在

ああああ</br>いいいい

DrqYuto👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

massages.textContentだからだと思います。.textContentはHTML文字列をエスケープするので、.innerHTMLならHTMLとして解釈されます。(massages内が適切にエスケープされて無い場合、意図しない表示になる可能性は有ります)

【element.innerHTML - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

投稿2020/01/18 08:50

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

unity.hatu

2020/01/18 14:12

お二人方回答ありがとうございます。 .textContentではなく.innerHTMLを使う方がいいのですね。 あまり考えずに使っていました。 .replace(/\n/g, '<br>');を使ったreplace。 replace('\n ', '<br>');では一回しか改行されないのですね。 はじめて知りました。正規表現というものがあるというのは何度かみたことはありますが、よくわからなかったので放置してました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問