javascript 插入DOM节点

1.使用appendChild，把一个子节点添加到父节点的最后一个子节点，.innerText插入的是内容

HTML

<!-- HTML结构 -->
<p id="js">react</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

2.插入一个节点到最后一项

var
   react =document.getElementById("react");
   list = document.getElementById("list");
   list = appendChild(react);

　　更多的时候我们会创建一些原生节点

比如我们插入一个p的标签名为：webpack。

var
   list = document.getElementById('list');
   webpack = document.getElementById('p')
   webpack.id = webpack;
   webpack.innerText= "打包工具"；
   list. appenChild(webpack);

　　显示

<!-- HTML结构 -->
<p id="js">react</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="webpack">打包工具</p>
 
 
</div>

2.插入指定的位置：insertBefore

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

多一个： ref = document.getElementById('XXXXX');
和list.insertBefore(XXXXX, ref);

JS DOM节点增删改查属性设置

一.节点操作

增

createElement(name)创建元素
appendChild();将元素添加

删

获得要删除的元素
获得它的父元素
使用removeChild()方法删除

改

第一种方式:

使用上面增和删结合完成修改

第二中方式:

使用setAttribute();方法修改属性          

使用innerHTML属性修改元素的内容

查

<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
    function addNode(){
        //1.获得 第一个div
        var div = document.getElementById("div_1");
        //2.创建a标签  createElement==>创建一个a标签   <a></a>
        var eleA =  document.createElement("a");
        //3.为a标签添加属性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.将a标签添加到div中
        div.appendChild(eleA);
    }
    //点击后 删除div区域2
    function deleteNode(){
        //1 获得要删除的div区域
            var div = document.getElementById("div_2");
        //2.获得父亲
            var parent = div.parentNode;
        //3 由父亲操刀 
            parent.removeChild(div);
    }
    //点击后 替换div区域3 为一个美女
    function updateNode(){
        //1 获得要替换的div区域3
        var div = document.getElementById("div_3");
        //2创建img标签对象 <img />
        var img = document.createElement("img");
        //3添加属性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }
    //点击后 将div区域4 克隆一份 添加到页面底部
    
    function copyNode(){
        //1.获取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.获得父亲
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }
    
    
</script>

二.修改 HTML DOM

改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML ，innerText。

改变 CSS 样式

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br>                             .style.fontSize=48px

改变 HTML 属性

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

创建新的 HTML 元素

createElement(name)

删除已有的 HTML 元素

elementNode.removeChild(node)

关于class的操作

elementNode.className

elementNode.classList.add

elementNode.classList.remove

posted on 2019-10-16 15:11 liuruyi007 阅读(532) 评论(0) 收藏举报

javascript 插入DOM节点

JS DOM节点增删改查 属性设置

二.修改 HTML DOM

JS DOM节点增删改查属性设置