カテゴリー
【Javascript活用講座】もっとHTML要素を上手く操作するためのappendChildの使い方
※ 当ページには【広告/PR】を含む場合があります。
2021/12/22
2022/10/03
appendChildメソッドの基本
<!DOCTYPE html>
<html lang="ja">
<html>
<meta charset="utf-8"/>
<body>
<div id="wrapper"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const parent = document.getElementById('wrapper');
const child = document.createElement('p');
child.textContent = 'appendChildメソッドのテストです。';
//👇親ノードに子ノードを追加する
parent.appendChild(child)
});
</script>
</body>
</html>
document.addEventListener("DOMContentLoaded", () => {
const parent = document.getElementById('wrapper');
const child = document.createElement('p');
child.textContent = 'appendChildメソッドのテストです。';
child === parent.appendChild(child) && console.log('オブジェクトが一致しました');
});
document.addEventListener("DOMContentLoaded", () => {
document.getElementById('wrapper').appendChild(document.createElement('p')).textContent = 'appendChildメソッドのテストです。';
});
createElementをカスタマイズする
const createElement = (tagName, attrs) => {
const _e = document.createElement(tagName);
if (attrs) {
for (let attr in attrs) { _e[attr] = attrs[attr]; }
}
return _e;
};
const createElement = (tagName, attrs) => {
const _e = document.createElement(tagName);
if (attrs) {
for (let attr in attrs) { _e[attr] = attrs[attr]; }
}
return _e;
};
document.addEventListener("DOMContentLoaded", () => {
document.getElementById('wrapper').appendChild(createElement('p', {
textContent: 'appendChildメソッドのテストです。'
}));
});
appendChildメソッドチェーン
const createElement = (tagName, attrs) => {
const _e = document.createElement(tagName);
if (attrs) {
for (let attr in attrs) { _e[attr] = attrs[attr]; }
}
return _e;
};
document.addEventListener("DOMContentLoaded", () => {
document.getElementById('wrapper')
.appendChild(createElement('div', {
innerHTML: 'これは最初のDIVです。'
}))
.appendChild(createElement('div', {
innerHTML: 'これは2番めのDIVです。'
}))
.appendChild(createElement('div', {
innerHTML: 'これは3番めのDIVです。'
}))
.appendChild(createElement('span', {
innerHTML: 'これは3番めの中の最初のSPANです。'
}));
});
余談〜コンストラクタ関数でメソッドチェーンを拡張
function DOMBuilder(element) {
this.element = element;
};
DOMBuilder.prototype = {
appendChildren: function(domSeed) {
const children = [];
for (const el of domSeed) {
const child = this.element.appendChild(createElement(el[0], el[1]));
children.push(new DOMBuilder(child));
}
return children;
}
};
appendChildren
const createElement = (tagName, attrs) => {
const _e = document.createElement(tagName);
if (attrs) {
for (let attr in attrs) { _e[attr] = attrs[attr]; }
}
return _e;
};
function DOMBuilder(element) {
this.element = element;
};
DOMBuilder.prototype = {
appendChildren: function(domSeed) {
const children = [];
for (const el of domSeed) {
const child = this.element.appendChild(createElement(el[0], el[1]));
children.push(new DOMBuilder(child));
}
return children;
}
};
document.addEventListener("DOMContentLoaded", () => {
(new DOMBuilder(document.getElementById('wrapper')))
.appendChildren([
['div', {innerHTML: 'これは最初のDIVです。'}],
['div', {innerHTML: 'これは2番目のDIVです。'}],
['div', {innerHTML: 'これは3番目のDIVです。'}],
]).forEach(dom => {
dom.appendChildren([
['p', {textContent: `${dom.element.innerHTML} の最初のPです。`}],
['p', {textContent: `${dom.element.innerHTML} の2番めのPです。`}],
]);
});
});
まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー