dom/<p></p>にa要素を追加して入力したurlへのリンクをつけたい

Javascriptを学習中です。
テキストエリアに入力したURLを配置したボタンをクリックさせることで表示させ、
そのURLへのリンクがつくようにしたいです。

pタグにリンクがつくようにしたいのですが、途中でわからなくなりました。
ご教示お願いしたいです。説明もいただけると幸いです。
よろしくお願いします。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>質問したい</title> </head> <body> ＵＲＬを入力：<input type="text" id="link" value="URL"> <input type="button" value="リンク追加" onclick="clickBtn()"/> <p id="output"></p> <script> function clickBtn() { var textbox = document.getElementById("link").value; document.getElementById("output").textContent = textbox;

    var aTag = document.createElement("a");
    document.p.appendChild( aTag );
   }

</script> </body> </html>

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

回答1件

ベストアンサー

ベタですが、

js
1function clickBtn() {
2var textbox = document.getElementById("link").value;
3document.getElementById("output").insertAdjacentHTML(
4    "afterbegin", 
5    "<a href='" + textbox + "'>" + textbox + "</a>"
6  ); 
7}

appendChildを使うなら、

vba
1function clickBtn() {
2  var textbox = document.getElementById("link").value;
3  var aTag = document.createElement("a");
4  aTag.href = textbox;
5  aTag.textContent = textbox;
6  document.getElementById("output").appendChild( aTag );
7}