js建立節點及其屬性

時間 2019-11-18
原文原文鏈接
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>建立節點及其屬性</title></head><style>    #listShow>li ul{        display: none;    }    #listShow>li>a{        background:#ccc;    }    li{        list-style: none;    }</style><body><div id="listS"></div></body></html><script>    /*建立節點的js不能寫在要建立節點位置的html前面，不然js就會失效*/    var element=document.getElementById('listS');    /*建立p標籤*/    var createP=document.createElement('p');    var node=document.createTextNode('這是建立的p標籤');    createP.appendChild(node);    element.appendChild(createP);    /*建立div標籤*/    var createP1=document.createElement('div');    var node1=document.createTextNode('這是建立的div標籤');    createP1.appendChild(node1);    element.appendChild(createP1);    /*建立a標籤至li標籤中*/    var createLi=document.createElement('li');    var createA=document.createElement('a');    createA.href='#';    createA.innerHTML='這是建立a標籤';    createLi.appendChild(createA);    element.appendChild(createLi);    /*建立ul>li>a標籤*/    var createUl=document.createElement('ul');    var createLi1=document.createElement('li');    var createLi2=document.createElement('li');    var createA1=document.createElement('a');    var createA2=document.createElement('a');    var nodeLi1=document.createTextNode('這是建立ul>li>a標籤');    var nodeLi2=document.createTextNode('這是建立ul>li>a標籤2');    createA1.href='#';    createA2.href='#';    createA1.appendChild(nodeLi1);    createA2.appendChild(nodeLi2);    createLi1.appendChild(createA1);    createLi2.appendChild(createA2);    createUl.appendChild(createLi1);    createUl.appendChild(createLi2);    element.appendChild(createUl);    /*建立input標籤*/    var createInput=document.createElement('input');    createInput.value='';    createInput.setAttribute('type','text');    element.appendChild(createInput);    /*建立input標籤中建立button按鈕*/    var createInput1=document.createElement('input');    createInput1.setAttribute('value','按鈕');    createInput1.setAttribute('type','button');    element.appendChild(createInput1);    /*建立button標籤*/    var createButton=document.createElement('button');    var nodeButton=document.createTextNode('這是建立的Button標籤');    createButton.appendChild(nodeButton);    element.appendChild(createButton);    /*建立img標籤*/    var createImg=document.createElement('img');    createImg.src='https://gd3.alicdn.com/imgextra/i3/261786115/TB26JieadYA11Bjy0FhXXbIwVXa_!!261786115.jpg';    element.appendChild(createImg);    /*建立hr標籤*/    var createHr=document.createElement('hr');    element.appendChild(createHr);    /*建立i標籤*/    var createI=document.createElement('i');    var nodeI=document.createTextNode('這是建立的i標籤');    createI.appendChild(nodeI);    element.appendChild(createI);    /*建立br標籤*/    var createBr=document.createElement('br');    element.appendChild(createBr);    /*建立b標籤*/    var createB=document.createElement('b');    var nodeB=document.createTextNode('這是建立的b標籤');    createB.appendChild(nodeB);    element.appendChild(createB);</script>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。