Object.keysでキーと値をlistのliタグ内で展開したいです。

Question

全ページのcopyrightの上にfooter用のナビゲーションを追加したいです。
全ページに入れたいのですが、Object.keysでキーと値をlistのliタグ内で展開したいのですがPHPのように組み込みがうまくいかなく。
レクチャー頂ければ幸いです。
※querySelectorでcopyrightを取得してそちらの上部にHTMLを差し込みたいです

var obj = {
  テキストa:"localhost/index",
  テキストb:"localhost/index2",
  テキストc:"localhost/index3",
  };
  Object.keys(obj).forEach(function(key) {
  console.log(key, obj[key]);
  });

console.log(HtmlDoc());

document.addEventListener('DOMContentLoaded', function() {
  const targetElement = document.querySelector('.copyright');
  const HtmlDoc = `
  <div class="footer">
  <ul class="footer_navlist">
  <li><a href="localhost/index">テキストa</a></li>
  <li><a href="localhost/index2">テキストb</a></li>
  <li><a href="localhost/index3">テキストb</a></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
  <div>
  `;
  targetElement.insertAdjacentHTML('beforebegin', HtmlDoc);
  });

PHPで恐縮ですが再現したいのは以下のような物です

<?php
$navlist = [
 'index' => 'テキストa',
  'index2' => '"テキストb',
];
?>
<li>
<?php foreach($navlist as $key => $text):?>
    <li><a href="<?php echo $key ?>"><?php echo $text ?>
      </a>
      
    </li>       
  <?php endforeach; ?>
</li>

Comments

[yambejp]

サンプルでつけているPHPが無茶苦茶なので何をしたいかわかりません
hrefがおかしい空のアンカーをつくってどうするつもりでしょうか？
<a href="テキストa"></a>

[nanashissss]

すみません。hrefは空ではなく各ＵＲＬを展開したいのです

[yambejp]

結果としてえたいHTMLを明示ください

[nanashissss]

以下のようなhtmlを展開して各ページの<p class="copyright"></p>の上に差し込みたいのです

<div class="footer">
<ul class="footer_navlist">
<li><a href="index">テキストa</a></li>
<li><a href="index2">テキストb</a></li>
<li><a href="index3">テキストc</a></li>
<li><a href="index4">テキストd</a></li>
<li><a href="index5">テキストe</a></li>
<li><a href="index6">テキストf</a></li>
</ul>
</div>

[yambejp]

とりあえず回答しておきました。

[退会済みユーザー]

差し込みたいっていう要件、質問文中に乗せるべきものなのに、気づかなかったわ。あとからでもいいので、質問文中に反映してね。質問への追記・修正の依頼の箇所はあくまでオマケなので。

[nanashissss]

内容が分かりにくく、申し訳ございませんでした

Answer 1

Object.entries() - JavaScript | MDN
のサンプルコードが使えそうです。

var obj = {
  テキストa: "localhost/index",
  テキストb: "localhost/index2",
  テキストc: "localhost/index3",
};
for (const [key, value] of Object.entries(obj)) {
  console.log(`<li><a href="${value}">${key}</a></li>`);
}

Comments

[nanashissss]

ありがとうございます。
参考にさせていただきます。

Answer 2

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var obj = {
    テキストa:"localhost/index",
    テキストb:"localhost/index2",
    テキストc:"localhost/index3",
  };
  const HtmlDoc = `
    <div class="footer">
    <ul class="footer_navlist">
    </ul>
    </div>
`;
  const frg = Object.assign(document.createElement("template"),{innerHTML:HtmlDoc});
  Object.entries(obj).forEach(x=>{
    frg.content.querySelector('.footer_navlist').insertAdjacentHTML('beforeend',`<li><a href="${x[1]}">${x[0]}</a></li>\n`);
  });
  document.querySelector('.copyright').before(frg.content);
});
</script>
<div class="copyright">&copy;sample</div>

ちなみにphpならこんな感じ

<?PHP
  $obj = [
    "テキストa"=>"localhost/index",
    "テキストb"=>"localhost/index2",
    "テキストc"=>"localhost/index3",
  ];
?>
<div class="footer">
<ul class="footer_navlist">
<?PHP foreach($obj as $key=>$val){ 
  print "<li><a href=\"$val\">$key</a></li>\n";
}
?>
</ul>
</div>

ただし、urlencodeやhtmlspecialcharsが必要になる可能性もあるので注意ください

Comments

[nanashissss]

早速のご回答ありがとうございます。
希望していたものが再現できました。
ありがとうございます。