我们实际项目中,一般通过DOM来操作标签,不使用节点方式操作标签一般是使用节点的新增,设定,写入,克隆操作
节点的操作,一般多用于,节点的新增和克隆复杂的新增节点操作,直接设定 innerHTML 更方便
节点操作
1.创建标签/节点
标签节点
变量 = document.createElement('标签名称');
文本节点
变量 = document.createTextNode('文本内容');
实际项目中,往往只是创建标签节点,之后使用 DOM 操作方式,来设定节点内容和属性
节点.innerHTML = '写入的内容'
节点.id = 'id属性值'
节点.setAttribute(属性,属性值);
2.节点的写入
在父级标签的最后写入
父级标签.appendChild( 要写入的标签节点/标签对象 );
在父级标签中,指定的标签之前写入
父级标签.insertBefore( 要写入的标签节点/标签对象 , 在哪个标签之前);
特别提示: 同一个节点,标签对象,只能写入一次,只会出现在一个位置上
例如 你先把div写在 span前,又把div写在 span后
div最终的位置只会出现在 span后
3.克隆
标签节点/对象.clone() 只克隆标签本身
标签节点/对象.clone(true) 克隆标签本身和内容
// 节点的新增操作
//创建一个标签节点
var oDiv = document.createElement('div');
// 节点属性
oDiv.id = 'div1';
oDiv.className = 'div2';
oDiv.setAttribute('name' , '我是div标签');
oDiv.innerHTML = '我是DOM操作写入的内容';
//创建一个文本节点
var oText = document.createTextNode('我是div');
// 创建一个span标签
var oSpan = document.createElement('span');
// 节点的写入操作
// 在div标签中,末位新增 文本节点
oDiv.appendChild( oText );
// 写入到 div中 第一个标签之前
oDiv.insertBefore( oSpan , oDiv.firstChild );
// 将div标签,写入到页面中
var oBody = document.body;
oBody.insertBefore(oDiv , oBody.firstChild );
// 克隆
var clone1 = oDiv.cloneNode();
var clone2 = oDiv.cloneNode(true);
console.log(clone1); //<div id="div1" class="div2" name="我是div标签"></div>
console.log(clone2); //<div id="div1" class="div2" name="我是div标签"><span></span>我是DOM操作写入的内容我是div</div>
Comments | NOTHING