js DOM 节点各种操作

自己随便写写DOM的操作,虽然很搓,但毕竟是自己用心做出来。还是加深了对DOM操作的理解。

只有第4个输入框的内容修改后可以添加到节点里,另外三个只是遍历节点把值附过去而已。

第二次修改内容还是有点小问题,获得的value始终是第4个输入框的值而不是当前需要修改输入框的valu。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
</head>
<body>
<div class="a" onclick="a1()">点击
    <div class="b">ss</div>
</div>
<div class="c"></div>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input  class="fasong" type="text"/>
<button class="dianji" onclick="dianji()">发送</button>
<script>
    var inp=document.getElementsByTagName("input");
    var fasong=document.getElementsByClassName("fasong")[0];
    var oNode=document.createElement("div");
    oNode.setAttribute("class","wenBen");
    var oNode1=document.createElement("div");
    oNode1.setAttribute("class","wenBen1");
    var oText=document.createTextNode("This a LY");
    var oText1=document.createTextNode("This a LYY");
    var a=document.getElementsByClassName("a")[0];
    var b=document.getElementsByClassName("b")[0];
    var div=document.getElementsByClassName("c")[0];
    oNode.appendChild(oText);
    a.insertBefore(oNode,b);
    oNode1.appendChild(oText1);
    a.replaceChild(oNode1,b);
    for(var i=0;i<inp.length;i++){
        inp[i].value=oText1.nodeValue
    }
    var c=0;
    function a1(){
        c++;
        if(c%2==1){
            oNode.innerHTML="SB"
        }else{
            oNode.innerHTML="This a LY"
        }
    }
    function dianji(){
        var content=document.createElement("div");
        content.setAttribute("class","cont")
        var contentwenben=document.createTextNode(fasong.value);
        content.appendChild(contentwenben);
        content.innerHTML=fasong.value+"<button onclick='del(this)'>删除</button> <button onclick='xiugai(this)'>修改</button>";
        div.appendChild(content)
    }
    function del(dom){
        dom.parentNode.remove();
    }
    function xiugai(dom){
      var parent=dom.parentNode;
      parent.innerHTML="<input class='upcontent'  type='text'/> <button onclick='yes(this)'>确定</button>";
      var upcontent=document.getElementsByClassName("upcontent");
        var contentwenben=document.createTextNode(fasong.value);
        for(var j=0;j<upcontent.length;j++){
            upcontent[j].value=contentwenben.nodeValue;
        }
    }
    function yes(dom){
        var upcontent=document.getElementsByClassName("upcontent")[0];
       var parent=dom.parentNode;
       parent.innerHTML=upcontent.value+"<button onclick='del(this)'>删除</button> <button onclick='xiugai(this)'>修改</button>"
    }
</script>
</body>
</html>

你可能感兴趣的:(js,dom)