JavaScript document.createElementメソッドでリンクを作成するサンプル
環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.103
構文
let element = document.createElement(tagName[, options]);
引数
tagName
生成される要素の型を特定する文字列です。生成される要素の nodeName は tagName の値で初期化されます。
options
省略可能な ElementCreationOptions オブジェクトで、 is という名前のプロパティをひとつ持ち、その値は前に customElements.define() を使用して定義したカスタム要素の名前です。
Node.hasChildNodes()
hasChildNodes() は Node インターフェイスのメソッドで、この Node に子ノードがあるかどうかを示す論理値を返します。
使用例
<!DOCTYPE html> <html> <body> <div id="cft"></div> <input type="button" value="追加" /> <script> function chgLnk() { const cft = document.getElementById("cft"); // 要素の追加 if(!cft.hasChildNodes()){ //createElementでリンクのa要素を作成 const ts = document.createElement("a"); //urlを指定 ts.href ="https://arkgame.com"; // target ts.target = "_blank"; //文字 ts.innerText = "arkgameのサイト"; cft.appendChild(ts); } } </script> </body> </html>
実行結果
「追加」ボタンを押すとリンクを作成します。