动态操作节点(appendChild(),insertBefore(),removeChild(),replaceChild())

  1. JS里动态创建元素节点:document.createElement(‘标签名’);
  2. 给一个元素追加一个子元素:当前元素.appendChild(子元素);
  3. 在指定的元素前插入新的元素:父级.insertBefore(‘新元素’,’当前元素’);
  4. 删除节点(只能在父级下进行操作):父级.removeChild(‘要删除的节点’);
  5. 替换节点:父级.replaceChild(替换的元素,被替换的元素);

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script>
        window.onload=function(){
            var oInp=document.getElementById('inp');
            var oBtn=document.getElementById('btn');
            var oUl1=document.getElementById('ul1');

            var oP=document.getElementById('p1');
            var oBtn1=document.getElementById('btn1');
            var oDiv=document.getElementById('div1');
            oBtn.onclick=function(){
                var oLi=document.createElement('li'); //动态创建li元素
                oLi.innerHTML=oInp.value;
                //oUl1.appendChild(oLi);  // 追加子元素
                 //在指定的元素之前插入新元素
                if(oUl1.children[0]){      //兼容IE
                    oUl1.insertBefore(oLi,oUl1.children[0]);
                }else{
                    oUl1.appendChild(oLi)
                }
                var oA=document.createElement('a');
                oA.innerHTML='删除';
                oA.href='javascript:;';
                oA.onclick=function(){
                    oUl1.removeChild(this.parentNode);  //删除节点 只能在父级下进行操作
                }
                oLi.appendChild(oA);
            }

            oBtn1.onclick=function(){
//                document.body.replaceChild(oP,oDiv);  //p标签替换div
                oDiv.appendChild(oP);  // 也可以操作已有的节点 把p标签添加到div里面
            }
        }
    script>
head>
<body>
    <input type="text" id="inp"/>
    <input type="button" value="添加" id="btn"/>
    <ul id="ul1">ul>

    <hr/>

    <p id="p1">我是P标签p>
    <button id="btn1">替换button>
    <div id="div1">我是divdiv>
body>
html>

你可能感兴趣的:(miaov,笔记)