节点的新增设定写入

我们实际项目中,一般通过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>

试一试