【Javascript】DOM Samples /Core　Node/insertBefore()

最初の文字

下記の文字に触ってください
<p onmouseover="

    // TEXT_NODEを作り変数ndへ入れる
    nd = document.createTextNode('どう?') ;

    // 最初の子(firstChild)の前へndを挿入
    this.insertBefore( nd , this.firstChild )

">最初の文字</p>

最初の文字

下記の文字に触ってください
<p onmouseover="

    // TEXT_NODEを作り変数ndへ入れる
    nd = document.createTextNode('どう?') ;

    // 最初の子(firstChild)の前へndを挿入
    this.insertBefore( nd ) //<--★ここの第二引数が無い場合

">最初の文字</p>

最初の文字

下記の文字に触ってください
<p onmouseover="

    // ELEMENT_NODEを作り変数ndへ入れる
    nd = document.createElement('img') ;

    // 最初の子(firstChild)の前へndを挿入
    this.insertBefore( nd , this.firstChild )

    // エレメントにsrc属性と値をセット
    nd.setAttribute('src','test.gif')

">最初の文字</p>

<script language='JavaScript'>
<!--

  function addImgBefore( targetNodeName , imgURL )
  {

    var targetNode = document.getElementById( targetNodeName )

    // 画像のELEMENT_NODEを作り変数ndへ入れる
    var imgNode = document.createElement('IMG') 

    // 最初の子(firstChild)の前へndを挿入
    targetNode.insertBefore( imgNode , targetNode.firstChild ) 

    // エレメントにsrc属性と値をセット
    imgNode.setAttribute('src', imgURL )

  }

//-->
</script>

<!-- このDIVへ挿入されます -->
<div id = "targetDIV">target</div>

<form>
  <input type    = "button" 
         onclick = "addImgBefore( 'targetDIV' , './cup.jpg' )"
         value   = "カップ挿入">
  <input type    = "button" 
         onclick = "addImgBefore( 'targetDIV' , './pen_l.gif' )"
         value   = "ペンギン挿入">
</form>