[JavaScript]createElementでリンクを追加する
環境
Google Chrome 99.0.4844.51
書式
リンクaタグ作成
const 変数 = document.createElement(“a");
リンクタグの属性(href、target、innerText)を設定します。
使用例
<!DOCTYPE html>
<html>
<body>
<div id="cft"></div>
<p><input type="button" value="追加" onclick="addBtn()" /></p>
<script>
function addBtn() {
//セレクタcftの取得
const gg = document.getElementById("cft");
// 要素の追加
if (!gg.hasChildNodes()) {
//リンクa要素作成
const mm = document.createElement("a");
//リンク先
mm.href = "https://arkgame.com/";
// innerText
mm.innerText = "arkgameサイトのリンク";
mm.target = "_blank";
//子ノードを追加
gg.appendChild(mm);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="cft"></div>
<p><input type="button" value="追加" onclick="addBtn()" /></p>
<script>
function addBtn() {
//セレクタcftの取得
const gg = document.getElementById("cft");
// 要素の追加
if (!gg.hasChildNodes()) {
//リンクa要素作成
const mm = document.createElement("a");
//リンク先
mm.href = "https://arkgame.com/";
// innerText
mm.innerText = "arkgameサイトのリンク";
mm.target = "_blank";
//子ノードを追加
gg.appendChild(mm);
}
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <div id="cft"></div> <p><input type="button" value="追加" onclick="addBtn()" /></p> <script> function addBtn() { //セレクタcftの取得 const gg = document.getElementById("cft"); // 要素の追加 if (!gg.hasChildNodes()) { //リンクa要素作成 const mm = document.createElement("a"); //リンク先 mm.href = "https://arkgame.com/"; // innerText mm.innerText = "arkgameサイトのリンク"; mm.target = "_blank"; //子ノードを追加 gg.appendChild(mm); } } </script> </body> </html>
実行結果
「追加」ボタンを押すと、「arkgameサイトのリンク」リンクを作成します。