元素添加到DOM树上
首先要创建一个元素 然后特在给元素添加内容 比如样式 属性 在添加到DOM树上
创建元素 document.createElement(“元素名”) 只存在内存中
创建 文本 document.createTextNode(“腊八节记得吃粥”);
设置内容和属性
a.href = "http://www.bailiban.com"; 设置属性
a.innerHTML = "百里半"; 设置内容
添加样式
h1.setAttribute('style','color:red;height:500px') 设置样式
h1.style.color = "#00f" 设置样式
添加到DOM树上
document.body.appendChild(a); 这是添加到 body标签下的
document.getElementsByTagName(“div”)获取div的节点
div.appendChild(a); //这是添加到div 下的
插入:在现有的子元素之前加入新元素insertBefore
var div = document.getElementsByTagName("div")[0];//获取父节点
var strong = document.getElementsByTagName("strong")[0]; //获取子元素节点
var span = document.createElement("span");//创建元素
span.innerHTML = "span"; //给元素添加值
div.insertBefore(span, strong //将新元素添加到父级元素div里面 strong元素前面
替换:替换现有的子元素replaceChild
var div = document.getElementsByTagName("div")[0];//获取父节点
var strong = document.getElementsByTagName("strong")[0]; //获取子元素节点
var span = document.createElement("span");//创建元素
span.innerHTML = "span"; //给元素添加值
div.replaceChild(span, strong //将div里的stong元素替换成span元素
在现有的子元素之后 加入新元
封装函数insertAfter();功能类似insertBefore();
提示:可忽略老版本浏览器,直接在Element.prototype上编程,因为在原型链上编程this可以指代任何你想调用的对象。
思路:将一个数插入到另一个数后面,可以转换为将这个数插入到那个数后面的数的前面,如果插入的位置是最后一位则用appendChild判断一下
<div>
<i></i>
<b></b>
<span></span>
</div>
<script type="text/javascript">
Element.prototype.insertAfter = function(targetNode,afterNode){
var beforeNode = afterNode.nextElementSibling;
if(beforeNode == null){
this.appendChild(targetNode); //插入位置是最后一位用appendChild
}else{
this.insertBefore(targetNode,beforeNode);
}
}
var div = document.getElementsByTagName('div')[0];
var b = document.getElementsByTagName('b')[0];
var span = document.getElementsByTagName('span')[0];
var p = document.createElement('p');
</script>
删除元素/ 通过父元素删除removeChild(); 自己删除 remove();
var div = document.getElementsByTagName("div")[0];
var p = document.getElementsByTagName("p")[0];
var strong = document.getElementsByTagName("strong")[0];
// 通过父元素删除 需要获取父级元素节点 然后获取需要删除元素的节点
div.removeChild(p);
// 自杀 只用获取需要删除元素的节点
strong.remove();