スポンサードリンク

JavaScriptを使ってHTMLの特定の要素の後に要素を追加したい

Javascriptを使ってHTMLの特定の要素の後に新たな要素を追加したかったのですが、insertBeforeというメソッドはあってもinsertAfterというメソッドって無いんですね。

まぁ、探せば間違いなく誰かが書いてると思うのですが、勉強も兼ねて実装してみました。

function insertAfter(){
  var targetId = "hoge";
  var target = document.getElementById(targetId);
  var parent = target.parentNode;
  var childs = parent.childNodes;
  
  var newElm = document.createElement("div");
  newElm.innerHTML = "<span style='color:red;'>挿入</span>";
  
  var find  = 0;
  var newTg = "";
  for(i=0; i<childs.length; i++){
    
    if(childs[i].id == targetId && find == 0){
      find = 1;
      
    }else if(find == 1){
      newTg = childs[i];
      find = 2;
    }
  }
  
  if(find == 2){
    parent.insertBefore(newElm, newTg);
    
  }else{
    parent.appendChild(newElm);
  }
}
 

今回は対象の要素のID名と追加する要素を関数の中に書いてますが、それぞれ引数で渡せるようにすれば汎用性が上がると思います。

今回は習作なので許してください。

テストに使ったHTMLのソースは以下の通りです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[TEST] insertAfter</title>

<script type="text/javascript">
function insertAfter(){
  var targetId = "hoge";
  var target = document.getElementById(targetId);
  var parent = target.parentNode;
  var childs = parent.childNodes;
  
  var newElm = document.createElement("div");
  newElm.innerHTML = "<span style='color:red;'>挿入<span>";
  
  var find  = 0;
  var newTg = "";
  for(i=0; i<childs.length; i++){
    
    if(childs[i].id == targetId && find == 0){
      find = 1;
      
    }else if(find == 1){
      newTg = childs[i];
      find = 2;
    }
  }
  
  if(find == 2){
    parent.insertBefore(newElm, newTg);
    
  }else{
    parent.appendChild(newElm);
  }
}

</script>
</head>

<body>

<p>前半</p>
<hr id="hoge">
<p>後半</p>

<input type="button" onclick="insertAfter()" value="HRタグの後に挿入">

</body>
</html>
 

Enjoy!

参考リンク
 ・JavaScript で特定の要素の前に要素を挿入する | すぐに忘れる脳みそのためのメモ
 ・【DOM連載#3】JavaScriptのDOMでHTML要素を追加・削除 - Noise of Web Programming
 ・element.childNodes - エレメントの子ノードリストを取得 - JavaScriptリファレンス

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER


  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク