ヒアドキュメントでうまく差し込みができない

Question

タグを作成、クラス名を付けてhtmlのuｌの最後に差し込みたかったのですが
ヒアドキュメントで入れようとするとうまく差し込みできなせん。
※createTextNodeでならできたのですが、htmlを入れたいのでシングルクオーテーションにすると文字列で表示されてしまい、望んだ結果が得られません。
レクチャー頂ければ幸いです。

<ul>
	<li class="mn01"><a href="./">HOME</a></li>
    <li class="mn02"></li>
    <li class="mn03"></li>
    <li class="mn04"</li>
    <li class="mn05"</li>
    <li class="mn06"></li>
	</ul>

  document.addEventListener('DOMContentLoaded', function() {
    const targetElement = document.querySelector('header nav ul');
    const elm = document.createElement('li');
    elm.setAttribute('class', 'mn07');  
    const HtmlDoc = `
    <p><a href="/" target="_blank">テキスト</a></p>
    `;
    //elm.appendChild ( document.createTextNode('<p><a href="/" target="_blank">テキスト</a></p>') );
    targetElement.appendChild ( elm );
});

Answer 1

HTML文字列からHTMLエレメントを構築するには、2つの方法があります。

• 適切なエレメントのinnerHTMLに書き込む
• DOMParser（MDN）を使う

Comments

[nanashissss]

ありがとうございます。

Answer 2

innerHTMLを利用すれば良いのでは？

document.addEventListener('DOMContentLoaded', function() {
  const targetElement = document.querySelector('header nav ul');
  const elm = document.createElement('li');
  elm.classList.add('mn07');  
  const HtmlDoc = `
    <p><a href="/" target="_blank">テキスト</a></p>
      `;
  elm.innerHTML=HtmlDoc;
  targetElement.appendChild ( elm );
});

もしくはliごとtextで用意して流し込むとか

document.addEventListener('DOMContentLoaded', function() {
  const targetElement = document.querySelector('header nav ul');
  const HtmlDoc = `
    <li class="mn07">
    <p><a href="/" target="_blank">テキスト</a></p>
    </li>
`;
  targetElement.insertAdjacentHTML('beforeend',HtmlDoc);
});

Comments

[nanashissss]

ありがとうございます。

Answer 3

targetElement.insertAdjacentHTML('beforeend', HtmlDoc); でしょうか。

勘違いしてました。elm.innerHTML = HtmlDoc でいいですね。

Comments

[nanashissss]

ありがとうございます。