JavaScript节点操作--创建节点、添加节点、删除节点、复制节点

节点操作

创建节点

document.createElement('tagName')

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也成为动态创建元素节点。

添加节点

node.appendChild(child)

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css中的after伪元素。

<body>
    <ul>
        
    ul>
    <script>
    	//创建元素节点
        var li =document.createElement('li');
        //添加节点
        var ul = document.querySelector('ul');
        ul.appendChild(li);
    script>
body>
node.insertBefore(child,指定元素)

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。

var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);

删除结点

node.removeChild(child);

node.removeChild()方法从DOM中删除一个子节点,返回删除的结点。

<body>
    <ul>
        <li>第一个li>
        <li>第二个li>
        <li>第三个li>
    ul>
    <script>
    	var ul = document.querySelector('ul');
        ul.removeChild(ul.child[0]);
    script>
body>

复制结点

node.cloneNode();

node.cloneNode()方法返回调用该方法的结点的一个副本。也称为克隆节点或者拷贝节点。括号里面为空或者false为浅拷贝,只复制结点不复制内容。括号里面为true为深拷贝,复制节点,复制内容

<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul> 
    <script>
    	var ul = document.querySelector('ul');
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    script>
body>

你可能感兴趣的:(前端开发,javascript,dom)