javascriptでdivの中身を変更できるようにしたいです

javascriptでdivの中身を下記のように仕組みを作りたいのですが、思うようにできません。
どなたかご教示のほどよろしくお願い致します。

【HTML内に書く内容】
<article id="textbox">
<p>このエリアにHTML要素を追加する</p>
</article>

【javascriptでやりたいこと】
・上記＜ｐ＞の中身に<div>要素を入れて<ｐ>を複数作成したいです
・<ｐ>の数は状況に応じて自由に数を調整したいです

勉強しはじめな為、質問内容が不十分でしたら申し訳ございません。
よろしくお願い致します。

質問者からの補足コメント

• yambejp様
  
  ご回答いただきありがとうございます。
  いただいた内容の＜script＞部分をNo１の回答者様の＜script＞と一緒に書けばよろしいのでしょうか？

  No.3の回答に寄せられた補足コメントです。 補足日時：2021/09/01 12:13

• yambejp様
  ありがとうございます。
  明日の朝出社しましたらすぐに試してみます。
  またご報告させていただきます。

  No.7の回答に寄せられた補足コメントです。 補足日時：2021/09/01 20:30

No.7 回答者： yambejp 回答日時： 2021/09/01 18:07

#5

このサイトhttpから始まる文字が勝手にリンクに変わっちゃうので
ダメですね
以下、ttpをコピー後httpに書き換えてためしてください

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const texts = [
{"tag":"a","param":{"href":"ttps://www.yahoo.co.jp/","target":"blank","textContent":"yahooのリンク"}},
{"tag":"a","param":{"href":"ttps://www.goo.ne.jp/","target":"blank","textContent":"gooのリンク"}},
{"tag":"a","param":{"href":"ttps://www.amazon.co.jp/","target":"blank","textContent":"amazonのリンク"}},
];

const textbox = document.querySelector('#textbox');
textbox.innerHTML = '';
texts.forEach(x=>{
const p=document.createElement('p');
p.appendChild(Object.assign(document.createElement(x.tag),x.param));
textbox.appendChild(p);
});
});
</script>
<article id="textbox">
<p>このエリアにHTML要素を追加する</p>
</article>

この回答へのお礼

yambejp様
改めて、いただいた内容で無事リンクが効きました。
ご教示いただきましてどうもありがとうございました。
大変勉強になりました。
またお世話になることがありましたらよろしくお願い致します。

お礼日時：2021/09/02 10:08

No.6 回答者： yambejp 回答日時： 2021/09/01 15:40

#5

あーなるほど、行き違いがあったようですみません。
ようやく理解しました。
textsはDOM用にいじってよいのですよね？であればこんな感じで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const texts = [
{"tag":"a","param":{"href":"https://www.yahoo.co.jp/","target":"blank","text …のリンク"}},
{"tag":"a","param":{"href":"https://www.goo.ne.jp/","target":"blank","text": …のリンク"}},
{"tag":"a","param":{"href":"https://www.amazon.co.jp/","target":"blank","tex …のリンク"}},
];

const textbox = document.querySelector('#textbox');
textbox.innerHTML = '';
texts.forEach(x=>{
const p=document.createElement('p');
p.appendChild(Object.assign(document.createElement(x.tag),x.param));
textbox.appendChild(p);
});
});
</script>
<article id="textbox">
<p>このエリアにHTML要素を追加する</p>
</article>

この回答へのお礼

yambejp様

ありがとうございます。
今テストしてみたのですが、HTML側に書いた文字（<p>このエリアにHTML要素を追加する</p>）が、中身が３つのリンクに書き換わらず、そのまま「このエリアにHTML要素を追加する」と表示がされてしまいます。

ちなみに、リンク２番目の
{"tag":"a","param":{"href":"https://www.goo.ne.jp/","target":"blank","text": …のリンク"}},
最後の部分の
"text": …のリンク"
が、他と見比べているうちに、「": 」が多いのかなと思い
"text …のリンク"
としてテストしてみましたが、これでも書き換わりませんでした。

申し訳ございませんが、再度ご教示いただけますでしょうか。
よろしくお願い致します。

お礼日時：2021/09/01 16:10

No.5 回答者： yambejp 回答日時： 2021/09/01 14:19

> #4

いや、そういうことではありません。

#1のお礼欄にaタグを使いたいということなので#3を提示しました。
#4のお礼欄を見てもaタグを作るための要素hrefやテキストなどが
記載されてないので、例えばtexts 配列でどういうデータを渡して
どういう結果がほしいのかを書いてほしい・・・ということです

この回答へのお礼

yambejp様

失礼致しました。
テキストの部分に実際には会社のHP内のページリンクをつけるのですが、
こちらでは例としてリンクを３つ入れました。
よろしくお願い致します。

<script>
// 追加したいテキストはここに入力
let texts = [
'<a href="https://www.yahoo.co.jp/" target="_blank">yahooのリンク</a>',
'<a href="https://www.goo.ne.jp/" target="_blank">gooのリンク</a>',
'<a href="https://www.amazon.co.jp/" target="_blank">amazonのリンク</a>'
];

let textbox = document.getElementById('textbox');
textbox.innerHTML = ''; // もともとの子要素を消す

let div = document.createElement('div');
let p = [];
for(let i = 0,len = texts.length;i<len;i++){
p[i] = document.createElement('p'); // p要素を作る
p[i].textContent = texts[i]; // テキストを代入
div.appendChild(p[i]); // pをdivに追加
}
textbox.appendChild(div); // divをarticleに追加
</script>

<article id="textbox">
<p>このエリアにHTML要素を追加する</p>
</article>

お礼日時：2021/09/01 15:21

No.4 回答者： yambejp 回答日時： 2021/09/01 13:29

#3

> 一緒に書けばよろしいのでしょうか？

仕様をもう一度まとめて補足をつけてください
私のコードは単品でコピペすれば動作するはずです

この回答へのお礼

yambejp様

補足の文字数をオーバーします為こちらに失礼致します。
下記のようにテキストを複数作成できる仕様でのDOM処理の仕方をご教示願います。
お手数をお掛けいたしますがよろしくお願い致します。

<script>
// 追加したいテキストはここに入力
let texts = [
'テキスト1',
'テキスト2',
'テキスト3'
];

let textbox = document.getElementById('textbox');
textbox.innerHTML = ''; // もともとの子要素を消す

let div = document.createElement('div');
let p = [];
for(let i = 0,len = texts.length;i<len;i++){
p[i] = document.createElement('p'); // p要素を作る
p[i].textContent = texts[i]; // テキストを代入
div.appendChild(p[i]); // pをdivに追加
}
textbox.appendChild(div); // divをarticleに追加
</script>

<article id="textbox">
<p>このエリアにHTML要素を追加する</p>
</article>

お礼日時：2021/09/01 13:41

No.3 回答者： yambejp 回答日時： 2021/09/01 10:59

> アンカーリンクを設定したい場合

以下のようにDOMで処理してください

<script>
window.addEventListener('DOMContentLoaded', function(e){
let a=Object.assign(document.createElement('a'),{href:"#test",textContent:"test"});
document.querySelector('#textbox p').appendChild(a);
});
</script>
<article id="textbox">
<p>このエリアにHTML要素を追加する</p>
</article>

この回答へのお礼

yambejp様

ご回答いただきありがとうございます。
いただいた内容の＜script＞部分をNo１の回答者様の＜script＞と一緒に書けばよろしいのでしょうか？

お礼日時：2021/09/01 12:14

No.2 回答者： sukitaro 回答日時： 2021/09/01 10:20

No1です。

>テキストを入れるところにアンカーリンクを設定したい場合、
>アンカーリンク部分<a href="～～～～">テキスト</a>が見えてしまう

この場合は、テキストを代入するところで、
textContentを、innerHTMLに変えると動きます。

が、わたしも詳しくはないのですが、
innerHTMLによる代入は、
使い方によってはセキュリティ上の問題が発生するそうです。

どのような場面でこの仕組みを使われるのか分かりませんが、
使うときは、何が代入されうるのか、
確認して使ってください。

「innerHTML セキュリティ」などで検索されると、
いくつか事例が出てくるようです。

この回答へのお礼

sukitaro様

ご教示いただいた方法にて解決致しました。
セキュリティ上の問題もあるとのこと承知致しました。
勉強になります。
使用するのは会社の環境で、ある管理画面の機能で賄えない部分の対応としてご質問させていただきました。
会社の件でもありますので、セキュリティを注意して参考とさせていただきます。
早急なご回答をどうもありがとうございました。

お礼日時：2021/09/01 10:58

No.1 回答者： sukitaro 回答日時： 2021/09/01 09:24

おそらくですが、

articleの中にdivを入れて、
そのdivの中にpを複数入れる
ということで良いでしょうか。

<script>
// 追加したいテキストはここに入力
let texts = [
'テキスト1',
'テキスト2',
'テキスト3'
];

let textbox = document.getElementById('textbox');
textbox.innerHTML = ''; // もともとの子要素を消す

let div = document.createElement('div');
let p = [];
for(let i = 0,len = texts.length;i<len;i++){
p[i] = document.createElement('p'); // p要素を作る
p[i].textContent = texts[i]; // テキストを代入
div.appendChild(p[i]); // pをdivに追加
}
textbox.appendChild(div); // divをarticleに追加
</script>

この回答へのお礼

sukitaro様

早速のご回答をありがとうございます。
まさにやりたかった内容です！
１点、テキストを入れるところにアンカーリンクを設定したい場合、
アンカーリンク部分<a href="～～～～">テキスト</a>が見えてしまうのですが、この場合はどのようにすればよろしいでしょうか？

お礼日時：2021/09/01 09:44