首页 > 代码库 > js创建节点及其属性

js创建节点及其属性

2024-08-18 09:59:04   222人阅读

<!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=http://www.mamicode.com/‘#‘;
    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=http://www.mamicode.com/‘#‘;
    createA2.href=http://www.mamicode.com/‘#‘;
    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=http://www.mamicode.com/‘‘;
    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=http://www.mamicode.com/‘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创建节点及其属性


联系
我们