JavaScript

javascript DOM

よく使うDOM操作を書いた、毎回調べるのがつかれてしまった
document.getで取得したDOMに対して使ったりする

//生成
var div_tag = document.createElement("div");  //<div></div>
//クラス名を付ける
div_tag.className = "contents"; //<div class="contents"></div>

//生成
var li_tag = document.createElement("li"); //<li></li> 
//styleを変更
li_tag.style.cssText = "list-style: none;"; 

//生成
ul_tag = document.createElement("ul"); //<ul></ul>   
//styleを変更
ul_tag.style.cssText = "padding: 0px;"; 

//上記で生成したulタグに生成したliタグを挿入する
ul_tag.appendChild(li_tag); //<ul><li></li></ul>

//button生成
var button_create = document.createElement("button"); //<button></button>
//typeを設定
button_create.type = "button"; //<button type="button"></button>

//関数作成
onclick_element = "button_press(" + element + ")"; //()内は変数等
//onclickを設定
 button_create.setAttribute('onclick', onclick_element);  //<button type="button" value="" onClik="button_press()"></input>

//上記で作成した内容を合わせる
li_tag.appendChild(button_create); //<li><button></button></li>
ul_tag.appendChild(li_tag); //<ul><li><button></button></li></ul>