[JavaScript]createElementでリンクを追加、削除
書式
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>
<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>
結果
「追加」ボタンを押下するとリンクを作成
「削除」ボタンを押下するとリンクを削除