js DOM 節點各類操做

時間 2019-11-05

原文原文鏈接

本身隨便寫寫DOM的操做，雖然很搓，但畢竟是本身用心作出來。仍是加深了對DOM操做的理解。html

只有第4個輸入框的內容修改後能夠添加到節點裏，另外三個只是遍歷節點把值附過去而已。node

第二次修改內容仍是有點小問題，得到的value始終是第4個輸入框的值而不是當前須要修改輸入框的valu。c++

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。