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>