親要素のid名と同じclass名を持つ子要素を、複数箇所に挿入したい。

Question

###前提・実現したいこと
表題のとおりですが、
親要素のid名と同じclass名を持つ子要素を、複数箇所に挿入したいと思っております。

###該当のソースコード

<div class="section">
<dl>
  <dt>タイトル</dt>
  <dd id="apple" class="Buy"></dd>
</dl>
<dl>
  <dt>タイトル</dt>
  <dd id="banana" class="Buy"></dd>
</dl>
<dl>
  <dt>タイトル</dt>
  <dd id="melon" class="Buy"></dd>
</dl>
</div>

上記のid="apple"の<dd></dd>の中には下記を

<p class="apple">詳細はこちら</p>

id="banana"には下記を

<p class="banana">詳細はこちら</p>

id="melon"には下記を

<p class="melon">詳細はこちら</p>

それぞれ挿入できればと思っています。

###補足情報

<p>のclass名は、挿入元となるそれぞれの親の<dd>のid名を自動で取得することで、 各親子のid、classの値を等しくできればと思っています。 また、<dl>要素は上記では３つですが、要素が増減しても対応できるようにしたいです。 javascript、jQueryいずれでも構いません。

何卒、よろしくお願いいたします。

Answer 1

document.querySelectorAll('dl').forEach(dl => {
  const dd = dl.querySelector('dd')
  dd.innerHTML = `<p class="${dd.id}">詳細はこちら</p>`
})

Comments

[退会済みユーザー]

早急にご回答いただき、誠にありがとうございます。
参考にさせていただきます。

Answer 2

ページ読み込み時に処理するのであれば、以下な感じかと。

$(function () {
  $('dd[id]')
    .each(function () {
      var $this = $(this);
      $this.append('<p class="' + $this.attr('id') + '">詳細はこちら</p>');
  });
});

Comments

[退会済みユーザー]

ご回答いただき、誠にありがとうございます。
ご指摘の方法で実現することができました。