js——添加或删除元素节点（append 和 innerHtml） 节点访问关系 节点属性

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82016015

添加或删除元素节点

1、append原理：

    //添加
    var para=document.createElement('p');//创建新的p标签
    var node=document.createTextNode('这是一个段落');//创建一个文本节点
    para.appendChild(node);//向p追加此文本节点
    para.className="lucky";//向p追加className
    var element=document.getElementById('div');
    element.appendChild(para);//向已有元素添加新元素（默认将para插入到element的最后）
    element.insertBefore(para,p1)//向已有元素添加新元素（默认将para插入到p1元素的前面）

    target.insertBefore(source,target.firstChild);//向target内部第一个位置添加source
    target.parentNode.insertBefore(source,target);//将source插入到target外部前面
    target.appendChild(source);//向target内部最后一个位置添加source
    target.parentNode.insertBefore(source, target.nextSibling);//将source插入到target外部后面


    //删除
    //原理
    var parent=document.getElementById('div');//找到父元素
    var child=document.getElementById('p');//找到子元素
    parent.removeChild(child);//从父元素删除子元素
      //简化
      var child=document.getElementById('p');//找到子元素
      child.parentNode.removeChild(child);//自杀删除
      //法二
      child.remove();//推荐使用


    //复制
    var 新节点=目标节点.cloneNode();//传入true：复制包含内部（例：<p>你好</p>）;传入false：只复制一层（例：<p></p>）

2、innerHtml原理

        //创建添加文本
        function text(json){
            var text='<div id="'+json.id+'">\n' +
                '    <p>'+json.content1+'</p>\n' +
                '    <p>'+json.content2+'</p>\n' +
                '</div>';
            return text;
        }
        //添加文本
        function addText(){
            var cc='idName';
            var element=document.getElementById('add');
            var json={
                text:{
                    id:cc,
                    content1:'lucky',
                    content2:'boy'
                }
            };
            for(var key in json){
                element.innerHTML += text(json[key]);//添加到子元素最后面
                element.innerHTML = text(json[key])+element.innerHTML;//添加到子元素最前面
            }
        }
        addText();

节点访问关系

父节点：parentNode

c=box.parentNode.parentNode;//获取box爷爷标签

兄弟节点（相邻）：
下个兄弟节点：nextSibling
上个兄弟节点：previousSibling

单个子节点：
第一个子节点：firstElementChild
最后一个子节点：lastElementChild
所有子节点：1、childNodes ；（会包含其他参数） 2、children ；（常用）

获取任意兄弟节点：
parentNode.children[index]

节点属性

获取节点属性：
1、目标 . getAttribute( ‘src’ ); //常用
2、目标 . src; //会出现乱码前缀

设置改变属性节点： 目标 . setAttribute( ‘src’ , ‘url’ );

删除属性节点： 目标 . removeAttribute( ‘src’ );