创建节点和插入节点
很多时候我们想要在某个位置插入一个新的节点,此时我们首先需要有一个节点存在,可以通过以下几种方式创建新节点。
创建节点
方法 描述 createElement() 创建一个新的节点,需要传入节点的标签名称,返回创建的元素对象 createTextNode() 创建一个文本节点,可以传入文本内容 innerHTML 也能达到创建节点的效果,直接添加到指定位置了
插入节点
方法 描述 write() 将任意的字符串插入到文档中 appendChild() 向元素中添加新的子节点,作为最后一个子节点 insertBefore() 向指定的已有的节点之前插入新的节点newItem:要插入的节点exsitingItem:参考节点 需要参考父节点
< button onclick = " add()" > 添加段落</ button>
< div id = " container" > </ div>
< script type = " text/javascript" >
function add ( ) {
var container = document. getElementById ( 'container' )
var paragraph = document. createElement ( 'p' ) ;
var txt = document. createTextNode ( 'hello' )
paragraph. appendChild ( txt)
container. appendChild ( paragraph)
}
</ script>
添加 “段落、图片、文本框、选项”
< body>
< button onclick = " addPara();" > 添加段落</ button>
< button onclick = " addImg();" > 添加图片</ button>
< button onclick = " addTxt();" > 添加文本框</ button>
< button onclick = " addOptions()" > 添加选项</ button>
< select name = " music" >
< option value = " -1" > 你心内的一首歌</ option>
< option value = " 0" > 南山南</ option>
< option value = " 1" > 喜欢你</ option>
</ select>
< hr />
<div id = "container"></ div>
</ body>
< script type = " text/javascript" >
function addPara ( ) {
var container = document. getElementById ( "container" ) ;
var p = document. createElement ( 'p' ) ;
var txt= document. createTextNode ( "以后的你会感谢现在努力的你" ) ;
p. appendChild ( txt) ;
container. appendChild ( p) ;
}
function addImg ( ) {
var img = document. createElement ( "img" ) ;
img. setAttribute ( 'src' , 'http://www.baidu.com/img/bd_logo1.png' ) ;
img. style. width = '300px' ;
img. style. height = '200px' ;
var container = document. getElementById ( "container" ) ;
container. appendChild ( img) ;
}
function addTxt ( ) {
var txt = document. createElement ( "input" ) ;
txt. setAttribute ( 'type' , 'text' ) ;
txt. setAttribute ( 'value' , '添加成功' ) ;
var container = document. getElementById ( "container" ) ;
container. appendChild ( txt) ;
}
function addOptions ( ) {
var option = document. createElement ( "option" ) ;
option. value = "2" ;
option. text = "不该" ;
var sel = document. getElementsByTagName ( "select" ) [ 0 ] ;
sel. options. add ( option) ;
var sel = document. getElementsByTagName ( "select" ) [ 0 ] ;
sel. innerHTML += "<option value = '2'>英雄</option>" ;
}
</ script>
间接查找节点
方法|属性 描述 childNodes 返回元素的一个子节点的数组 firstChild 返回元素的第一个子节点 lastChild 返回元素的最后一个子节点 nextSibling 返回元素的下一个兄弟节点 parentNode 返回元素的父节点 previousSibling 返回元素的上一个兄弟节点
删除节点
方法|属性 描述 removeChild() 从元素中移除子节点
< script type = " text/javascript" >
function delNode ( ) {
var programmer = document. getElementById ( "programmer" ) ;
programmer. parentNode. removeChild ( programmer) ;
}
</ script>
< body>
< span id = " programmer" > 程序猿</ span>
< a href = " javascript:void(0)" onclick = " delNode();" > 删除</ a>
</ body>