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

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 を生成します。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>

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

 

 

JavaScript

Posted by arkgame