DOM节点
< div id= "app" > < / div>
< button onclick= "create()" > 创建< / button>
< button onclick= "remove()" > 删除< / button>
< button onclick= "insert()" > 插入< / button>
< button onclick= "replace()" > 替换< / button>
var oapp = document. querySelector ( "#app" ) ;
创建 create()
function create ( ) {
for ( var i = 0 ; i < 10 ; i++ ) {
var op = document. createElement ( "p" ) ;
var text = document. createTextNode ( "这是第" + i + "元素" ) ;
op. appendChild ( text) ;
oapp. appendChild ( op) ;
}
}
删除 remove()
//remoeChild appendChild insertBefore(新节点,将要在谁前面插入)(在已有的子节点前插入一个)
//replaceChild 替换节点,新的替换旧的
//都是要获得他们的父元素才能操作
function remove ( ) {
var op = document. querySelectorAll ( "p" ) [ 0 ] ;
oapp. removeChild ( op) ;
}
insertBefore() 插入
function insert ( ) {
var op = document. querySelectorAll ( "p" ) [ 0 ] ;
var text = document. createTextNode ( "hello" ) ;
var oul = document. createElement ( "ul" ) ;
oul. appendChild ( text) ;
oapp. insertBefore ( oul, op) ;
}
替换 replace()
function replace ( ) {
var oh1 = document. createElement ( "h1" ) ;
var text = document. createTextNode ( "hello" ) ;
var op = document. querySelectorAll ( "p" ) [ 0 ] ;
oul. appendChild ( text) ;
oapp. replaceChild ( oh1, op) ;
}