<!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>
时间： 2024-08-05 00:01:55