创建元素节点
document.createElement( '节点名' );
var oA = document.createElement( 'a' ); //这里创建一个元素节点存放在内存中，还没放进DOM树
增：
父级.appendChild( 新子节点 ) 父级的最后一个添加一个节点
var oA = document.createElement( 'a' );
oBox.appendChild( oA );
向父级的最后一个添加一个节点
image.png
添加内容
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
var oA = document.createElement('a');
oA.innerHTML ='我是a标签';//往oA里添加内容
oA.href = 'http://www.baidu.com';
注意：在写入DOM树之前把标签属性内容先设置好，再写入，这样HTML只绘制一次
oBox.appendChild(oA);
console.log( oA );
</script>
父级.insertBefore（ 新节点，当前某一个子节点）
往第二个参数的子节点前，添加新节点
<script>
var oBox = document.getElementsByClassName( 'box' )[0];
var oA = document.createElement( 'a' );
oBox.insertBefore( oA , oBox.chilren[1] );
</script>
image.png
如果父级没有子元素的时候
<div class="box"></div>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
var oA = document.createElement('a');
oA.innerHTML ='我是a标签';//往oA里添加内容
oA.href = 'http://www.baidu.com';
oBox.insertBefore( oA , oBox.children[1] );
</script>
也可以正常添加，不用在乎子节点有没有存在这样写都可以在第一个添加
特殊图片添加
var oImg = new Image();
oImg.src = '1.jpg';//添加路径
oDiv.appendChild( oImg );
children动态获取
<body>
<div class="box"></div>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
var boxChild = oBox.children; //获取oBox下的子元素，存放在boxChild
oA.innerHTML ='我是a标签';//往oA里添加内容
oA.href = 'http://www.baidu.com';
oBox.insertBefore( oA , boxChild[0] );//往boxChild的第一个前写入oA
console.log( boxChild[0]); //打印出第一个
</script>
</body>
image.png
说明children是动态属性；
createTextNode创建文本节点
var oDiv = document.getElementsByTagName( 'div' )[0];
var oTxt = document.createTextNode( '我是文本节点' );
oDiv.appendChild( oTxt );
image.png
createDocumentFragment()创建的是文档碎片、整合多个碎片中介
<body>
<div></div>
<script>
var oDiv = document.getElmentsBytagName( 'div' )[0],
oA = document.createElement( 'a' ),
oP = document.createElement( 'p' ),
oTxt = document.createTextNode( '这是文本节点' ),
obj = document.createDocumentFragment();//创建文档碎片
oA.innerHTML = '我是a标签';
oP.innerHTML = '我是p标签';
oDiv.appendChild( oA );
oDiv.appendChild( oP );
oDiv.appendChild( oTxt );
用这种方法页面会重绘三次
obj.appendChild( oA );
obj.appendChild( oP );
obj.appendChild( oTxt );
创建文档碎片 把上面要写入的放到obj里
oDiv.appendChild( obj );
统一放到oDiv里，页面只绘制一次
</script>
</body>
父级.removeChild( 子节点 ) 删除子节点
<body>
<div class="wrap1">
<div class="wrap">
<div class="box">
<p>你好的</p>
<a href="">我是A标签</a>
</div>
</div>
</div>
<script type="text/javascript">
var oBox = document.getElementsByClassName( 'box' )[0];
console.log( oBox );
oBox.removeChild( oBox.children[1]);//删掉a标签
</script>
</body>
注意：只能通过父级才能杀掉子节点；
如果要自己删自己只有找到父级，再来删掉
<body>
<div class="wrap1">
<div class="wrap">
<div class="box">
<p>你好的</p>
<a href="">我是A标签</a>
</div>
</div>
</div>
<script type="text/javascript">
var oBox = document.getElementsByClassName( 'box' )[0];
var x = oBox.parentNode.removeChild( oBox );
//oBox.parentNode先找到父级再来删掉removeChild( oBox )
console.log( oBox ) //打印出上面获取的
</script>
</body>
oBox.parentNode.removeChild( oBox );
oBox.parentNode先找到父级再来删掉removeChild( oBox )
console.log( oBox ) //打印出上面获取的
说明：oBox还在！存放在内存里，没有被删掉
replaceChild()替换
父级.replaceChild( 哪个要替换 ， 替换的对象 )
<ul>
<li>123</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '你好明天';
oUl.replaceChild( oLi,oUl.children[0] );
克隆cloneNode()
1、cloneNode( true ) 克隆元素下的所有内容
2、cloneNode( false ) 只克隆标签 (默认)
true只有克隆标签里行内样式，行内事件
js里定义事件 属性都没办法克隆
<div>你昌好的是归了的是进
<p>你好</p>
</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0],
oDiv.erguo = '2214'; //js里自定义属性克隆不了
var oAll = oDiv.cloneNode( true );
console.log( oAll );
<div>你昌好的是归了的是进
<p>你好</p>
</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0],
oAll = oDiv.cloneNode( false );
console.log( oAll );
补充
innerHTML与createElement比较
在IE下 innerHTML性能秒杀createElement
其他浏览器innerHTML高一点点
如果选择哪个呢？
<div class="wrap"></div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0],
oA = document.createElement('a');
oA.innerHTML = '点击跳转百度';
oA.href = 'http://www.baidu.com';
oDiv.appendChild( oA );
</script>
可以用innerHTML来代替
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0];
oDiv.innerHTML = '<a href = 'http://www.baidu.com' >点击跳转百度</a>';
</script>
要添加的标签没有添加事件时候用innerHTML
添加事件的时候
var oDiv = document.getElementsByTagName('div')[0],
oA = document.createElement('a');
oA.innerHTML = '点击跳转百度';
oA.href = 'http://www.baidu.com';
oA.onclick = function (){
alert(1);
}
oDiv.appendChild( oA );
innerHTML写法
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0];
oDiv.innerHTML = '<a href = "http://www.baidu.com" >点击跳转百度</a>';
var oA = document.getElementsByTagName('a')[0];
oA.onclick = function () {
alert(1);
}
</script>
添加事件的时候用createElement
网友评论