美文网首页
《(创建、修改、删除、克隆)元素》

《(创建、修改、删除、克隆)元素》

作者: 蔡森屿 | 来源:发表于2018-05-06 22:53 被阅读0次

    创建元素

    createElement()

    createElement方法用来生成HTML元素节点。

    var newDiv = document.createElement("div");
    

    createElement方法的参数为元素的标签名,即元素节点的tagName属性。如果传入大写的标签名,会被转为小写。如果参数带有尖括号(即<和>)或者是null,会报错。

    createTextNode()

    createTextNode方法用来生成文本节点,参数为所要生成的文本节点的内容。

    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("Hello");
    

    上面代码新建一个div节点和一个文本节点

    createDocumentFragment()

    createDocumentFragment方法生成一个DocumentFragment对象。

    var docFragment = document.createDocumentFragment();
    

    DocumentFragment对象是一个存在于内存的DOM片段,但是不属于当前文档,常常用来生成较复杂的DOM结构,然后插入当前文档。这样做的好处在于,因为DocumentFragment不属于当前文档,对它的任何改动,都不会引发网页的重新渲染,比直接修改当前文档的DOM有更好的性能表现。

    修改元素

    appendChild()

    在元素末尾添加元素

    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("Hello");
    newDiv.appendChild(newContent);
    
    insertBefore()

    在某个元素之前插入元素

    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("Hello");
    newDiv.insertBefore(newContent, newDiv.firstChild);
    
    replaceChild()

    replaceChild()接受两个参数:要插入的元素和要替换的元素

    newDiv.replaceChild(newElement, oldElement);
    

    删除元素

    删除元素使用removeChild()方法即可

    parentNode.removeChild(childNode);
    

    clone元素

    cloneNode()方法用于克隆元素,方法有一个布尔值参数,传入true的时候会深复制,也就是会复制元素及其子元素(IE还会复制其事件),false的时候只复制元素本身

    node.cloneNode(true);
    

    参考"饥人谷"

    相关文章

      网友评论

          本文标题:《(创建、修改、删除、克隆)元素》

          本文链接:https://www.haomeiwen.com/subject/gyeprftx.html