js建立新节点

<!DOCTYPE html>html

<html lang="en">node

<head>app

<title>建立节点及其属性</title>htm

</head>ip

<style>element

#listShow>li ul{get

display: none;input

}it

#listShow>li>a{

background:#ccc;

}

li{

list-style: none;

}

</style>

<body>

</div>

</body>

</html>

/*建立节点的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>