文章目录
增加
1. createElement(‘标签名’)
<body>
<div id='wrap'>
</div>
</body>
var dWrap=document.getElementById('wrap');//获取id名为wrap的div
var p1=document.createElement('p');
p1.innerHTML='我绿了';
//将新创建的p标签放在指定位置
dWrap.appendChild(p1); //appendChild往后放，insertBefore往前放
2. insertBefore(new, old)
<body>
<div id='wrap'>
</div>
</body>
//给div增加内容
var dWrap=document.getElementById('wrap');
var arr=['诸葛亮','司马懿','郭嘉'];
for (var i=0; i<arr.length; i++) {
var role=document.createElement('p');
role.innerHTML=arr[i];
dWrap.appendChild(role);
}
//获取诸葛亮的p标签
var zgl=document.getElementsByTagName('p')[0];
//新增‘荀彧’p标签
var xy=document.createElement('p');
xy.innerHTML='荀彧';
//把荀彧放在诸葛亮前面
dWrap.insertBefore(xy, zgl);
3. setAttribute(‘标签名’)
设置属性
-
注意与点语法增加属性的区别：
-
用点语法能添加的自定义属性，但在html中是看不到的（用console.log可以打印出来）；
-
用setAttribute添加的自定义属性能显示在html中；
-
setAttribute设置的自定义属性通过.语法是不能调用的！
-
//沿用上例
zgl.setAttribute('id', 'zg');
zgl.setAttribute('class','ok');
//也可以用.语法设置属性
zgl.id='zg';
zgl.className='ok';
zgl.setAttribute('myname', 'zg');
//.语法不能调用setAttribute设置的自定义属性
console.log(zgl.myname);//这种写法是错误的
//正确做法是用getAttribute来调用
console.log(zgl.getAttribute('myname'));
4. cloneNode(true/false)
true包含子节点
false不包含子节点
var d=dWrap.cloneNode(true);
console.log(d);
注意：新增之后需要用ele.appendChild(标签名); 把新增的内容放到指定地方
