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>