<!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>
js創建節點及其屬性
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。