创建节点及其属性

<!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>
创建节点及其属性

相关推荐
