HTML DOM Element replaceChild() メソッド
- 前のページ removeEventListener()
- 次のページ scrollHeight
- 上一階層に戻る HTML DOM Elements オブジェクト
定義と用法
replaceChild() 新しいノードで子ノードを置き換えるメソッド。
も参照してください：
関連するドキュメントメソッド：
例
例1
新しいテキストノードで <li> 要素のテキストノードを置き換えます：
const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);
置き換え前：
- コーヒー
- ティー
- ミルク
置き換え後：
- ウォーター
- ティー
- ミルク
例2
<li> 元素を新しい <li> 元素で置き換えます：
// 新しい <li> 元素を作成します：
const element = document.createElement("li");
// 新しいテキストノードを作成します：
const textNode = document.createTextNode("ウォーター");
// テキストノードを <li> 元素に追加します：
element.appendChild(textNode);
// id="myList" の <ul> 元素を取得します：
const list = document.getElementById("myList");
// 新しい <li> 元素で最初の子ノードを置き換えます：
list.replaceChild(element, list.childNodes[0]);
置き換え前：
- コーヒー
- ティー
- ミルク
置き換え後：
- ウォーター
- ティー
- ミルク
構文
node.replaceChild(newnode, oldnode)
引数
| 引数 | 説明 |
|---|---|
| newnode | 必須。挿入するノード。 |
| oldnode | 必須。削除するノード。 |
返り値
| タイプ | 説明 |
|---|---|
| Node オブジェクト | 置き換えられるノード。 |
ブラウザのサポート
element.replaceChild() DOMレベル1 (1998) の機能です。
すべてのブラウザが完全にサポートしています：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| サポート | 9-11 | サポート | サポート | サポート | サポート |
- 前のページ removeEventListener()
- 次のページ scrollHeight
- 上一階層に戻る HTML DOM Elements オブジェクト
