mozilla
Your Search Results

    Node.replaceChild

    概要

    指定ノードの子ノードを別のノードに置き換えます。

    構文

    replacedNode = parentNode.replaceChild(newChild, oldChild);
    
    • newChild : oldChild を置き換える新しいノード(既存のノードは先に取り除かれます)
    • oldChild : newChild に置き換えるノード
    • replacedNode : 置き換えられたノード(oldChild が代入される)

    // <div>
    //  <span id="childSpan">foo bar</span>
    // </div>
    
    // ID も属性も内容も持たない空要素を生成
    var sp1 = document.createElement("span");
    
    // 生成したノードに id 属性 'newSpan' を付与
    sp1.setAttribute("id", "newSpan");
    
    // テキストノードを生成
    var sp1_content = document.createTextNode("新しい span 要素");
    
    // 生成したテキストノードを先の空要素の子ノードとして配置
    sp1.appendChild(sp1_content);
    
    // 置換に先んじ、参照を代入
    var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
    var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
    
    // 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
    parentDiv.replaceChild(sp1, sp2);
    
    
    // 上記コード実行後のノードは以下の様になります:
    // <div>
    //   <span id="newSpan">新しい span 要素</span>
    // </div> 
    

    仕様書

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: fscholz, ethertank, Ryotakano, xuancanh
    最終更新者: xuancanh,