码迷,mamicode.com
首页 > Web开发 > 详细

js创建节点及其属性

时间:2016-11-01 19:15:42      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:set   script   document   href   位置   one   rip   ext   show   

<!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创建节点及其属性

标签:set   script   document   href   位置   one   rip   ext   show   

原文地址:http://www.cnblogs.com/cx709452428/p/6020374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!