js创建节点及其属性
Posted 时空旅人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js创建节点及其属性相关的知识，希望对你有一定的参考价值。
<!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创建节点及其属性的主要内容，如果未能解决你的问题，请参考以下文章