要素に子要素を最後に追加
指定された要素に子要素を最後に追加するには、element.appendChildメソッドを使用します。
構文
var childElement = parentElement.appendChild(element);引数
| 引数名 | 型 | 説明 |
|---|---|---|
| element 必須 |
node | 子要素として追加する要素 |
戻り値
追加された子要素を返します。
サンプルコード
JavaScript
var spanElement = document.createElement('span'),
pElement = document.getElementById('sample-append-child');
pElement.appendChild(spanElement);HTML文字列について
appendChildはNodeのみで、HTML文字列には対応していません。
HTML文字列を追加する場合は、次のような方法で実現します。
- ※ document.querySelectorを使用するので、IE7以下は対応していません。
JavaScript
/**
* 要素にHTML文字列を子要素として追加
* @param {string} htmlStr 追加する子要素の文字列
* @param {Element|Node} parentSelector 対象となる親要素
* @return {Element|Node} 追加した子要素
*/
var append = function(htmlStr, parentSelector) {
var tmpElem;
if (typeof htmlStr !== 'string' ||
typeof parentSelector !== 'string' ||
document.querySelector(parentSelector).length === 0) return;
tmpElem = document.createElement('div');
tmpElem.innerHTML = htmlStr;
return document.querySelector(parentSelector).appendChild(tmpElem.firstChild);
};第一引数に追加する子要素の文字列、第二引数に対象となる親要素を指定します。
戻り値は追加した子要素のエレメントを返します。
JavaScript
var outputHTMLStr = '<p>出力サンプル</p>';
append(outputHTMLStr, '.sample');