JSで改行ができない

Question

前提・実現したいこと

検索したら、\nを<br>に変換できるらしかったので、やってみたが全然うまくいかない。

色々試しているものは、なんとなくそのままにコメントアウトで載っけています。

発生している問題・エラーメッセージ

pitch<br>と表示される
（文字列として）

該当のソースコード

HTML

<form name="form1"> <select name="position"> <option value="pitch">投手</option> <option value="catch">捕手</option> <option value="naiya">内野手</option> <option value="gaiya">外野手</option> </select>

---

js

function tsuika(){
//var sen=document.createElement("div");
var x=document.form1.position;
var no=document.form1.position.selectedIndex;
var moji1=document.form1.position.options[no].value;
moji2=document.createTextNode(moji1);
kai="<br>";
//sen.textContent=moji2+kai;

//var result = kai.replace(/\r?\n/g, '<br>');
//kai.replace("<br>")
document.getElementById("wrapper").append(moji2);
document.getElementById("wrapper").append(kai);
val=cr2br(kai);
}

function cr2br(val) {
val = val.replace(/\r\n/g, '<br>');
val = val.replace(/\n/g, '<br>');
val = val.replace(/\r/g, '<br>');
return val;
}

試したこと

\n直接入力
replace活用

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

appendで追加できるのは文字列またはNodeです。
改行はbr要素として追加する必要があります。

https://developer.mozilla.org/ja/docs/Web/API/ParentNode/append

document.getElementById("wrapper").append("hoge");
document.getElementById("wrapper").append(document.createElement("br"));
document.getElementById("wrapper").append("fuga");

Comments

[bluecity_kaja]

ありがとうございます･*¨*･.¸¸･*ﾟ¨ﾟ･*:..･*･:≡(　ε:)createElement使っていたので、分かりやすくてベストアンサーにしました！

Answer 2

掲載されているコードと、上に書かれているやりたいことがちょっと一致していないように見えるんですが、質問者さんのやりたいことが

セレクトボックスを選択するたびにwrapperという範囲にvalueを改行（<br>）つきで追加していく

という動作だと想像で回答してみます。

document.getElementById("wrapper").append(moji2);
document.getElementById("wrapper").append(kai);

の部分を

document.getElementById("wrapper").insertAdjacentHTML('beforeend', moji1 + kai);

に変更します。これで画面上は1行に1つずつvalueの値が表示されていきます。

Comments

[bluecity_kaja]

ありがとうございます･*¨*･.¸¸･*ﾟ¨ﾟ･*:..･*･:≡(　ε:)今度試してみますね！