[JavaScript]createElementでリンクを追加、削除

2014年6月4日2021年10月26日

書式
1.HTMLElement.innerText
innerText は HTMLElement のプロパティで、ノードとその子孫の「レンダリングされた」テキスト内容を示します。
const renderedText = htmlElement.innerText
2.Document.createElement()
var element = document.createElement(tagName[, options]);
document.createElement() メソッドは tagName で指定された HTML 要素を生成し、
または tagName が認識できない場合は HTMLUnknownElement を生成します。

使用例

<div id="show"></div>
<!--追加ボタンを押下すると、 関数addLinkを呼び出す -->
<p><input type="button" value="追加" onclick="addLink()" /></p>
<!--削除ボタンを押下すると、 関数delLinkを呼び出す -->
<p><input type="button" value="削除" onclick="delLink()" /></p>

<script>
　/*リンクを作成*/
  function addLink() {
    const cftdiv = document.getElementById("show");
    // 要素の追加
    if (!cftdiv.hasChildNodes()) {
      /*タグaで指定された HTML 要素*/
      const hh = document.createElement("a");
       // href指定
      hh.href = "https://www.yahoo.co.jp/";
      // target指定
      hh.target = "_blank";
       // ノードのテキスト内容
      hh.innerText = "yahoo";
      /*親ノードの子ノードリストの末尾にノードを追加*/
      cftdiv.appendChild(hh);
    }
  }
  /*リンクを削除*/
  function delLink() {
    const cftdiv = document.getElementById("show");
    if (cftdiv.hasChildNodes()) {
      cftdiv.removeChild(cftdiv.firstChild);
    }
  }
</script>

結果
「追加」ボタンを押下するとリンクを作成
「削除」ボタンを押下するとリンクを削除