<!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创建节点及其属性的更多相关文章

  1. js 创建节点 以及 节点属性 删除节点

    case 'copy': var B1 = document.getElementById("B1"); //获得B1下的html文本 var copy_dom = documen ...

  2. js创建节点，小试牛刀

    实现如下的功能 非常简单的一个小训练. 思想: 1.首先创建text和一个button 代码如下. <body> <input type="text" id=&q ...

  3. js 创建节点

    //获取对象 console.log(obj)//字符串转对象 var ob = JSON.parse(data); //对象转为字符串 console.log(JSON.stringify(obj) ...

  4. JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  5. jQuery_DOM学习之------创建节点及节点属性

    DOM创建节点及节点属性 一.创建新的节点并添加到dom中 dom 节点创建的过程(创建节点<元素.属性.文本等>.添加节点的属性.加入到文档中) jQuery创建元素节点的方法: 创建元 ...

  6. js DOM 节点树 设置 style 样式属性

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. JS DOM创建节点

    DOM节点操作之增删改查 document.write() 可以向文档中添加节点 但是有个致命问题,会把文档原有的节点全部清空 因此不推荐使用 <!DOCTYPE html> <ht ...

  8. 第十三课：js操作节点的创建

    浏览器提供了多种方法创建节点.比如:document.createElement,innerHTML,insertAdjacentHTML,createContextualFragment. docu ...

  9. XMLHelper类 源码(XML文档帮助类,静态方法,实现对XML文档的创建,及节点和属性的增、删、改、查)

    以下是代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

随机推荐

  1. Java网络编程之流——流、过滤器、阅读器和书写器

    Java的I/O建立于流(Stream)之上.输入流读取数据:输出流写入数据.所有的输出流都有相同的基本方法来写入数据,所有输入流也使用相同的基本方法来读取数据.在创建流之后,你通常可以忽略在读写时的 ...

  2. 这是用过的"最差"树形插件

      这是用过的"最差"树形插件 !!! 或许大家听过一个bootstrap UI框架---ace皮肤.有兴趣的童鞋可以在线查看:https://www.iteblog.com/ac ...

  3. Jquery父级节点追加

    <!-- 父节点追加 --><!DOCTYPE html><html lang="en"><script src="../../ ...

  4. PDO的一些操作

    一.实例化一个PDO对象 //实例化一个PDO对象//1,设置数据源相关参数$dbms = 'mysql';$host = '127.0.0.1';$port = '3306';$dbname = ' ...

  5. handler发消息的形式

    1.onCreate()中写好handler的接受机制,准备接受并处理消息 2.thread中利用handler.post(Runnable r): protected void onCreate(B ...

  6. C++之路进阶——codevs1789（最大获利）

    1789 最大获利 2006年NOI全国竞赛  时间限制: 2 s  空间限制: 128000 KB  题目等级 : 大师 Master       题目描述 Description 新的技术正冲击着 ...

  7. Linux操作系统备份之三：通过二进制拷贝（dd）方式实现Linux操作系统数据的备份

    前面有两篇文章,<Linux操作系统备份之一:使用LVM快照实现Linux操作系统数据的在线备份>和<Linux操作系统备份之二:通过tar拷贝分区实现Linux操作数据的在线备份& ...

  8. Apache 打开网页的时候等待时间过长的解决方案

    服务器搭建后经常在打开页面的时候,等待很长时间,有时候,都超过一分钟了,然后才能打开,但是打开后,速度又很快,休息一会再点击,又会很慢了,遇到了这种问题很头疼,由于不是专业做服务器配置的,所以刚开始没 ...

  9. c#中按键小技巧

    以后会补充其他的内容

  10. YbSoftwareFactory 代码生成插件【十八】：树形结构下的查询排序的数据库设计

    树形结构的排序在中国特色下十分普遍也非常重要,例如常说的五大班子,党委>人大>政府>政协>纪委,每个班子下还有部门,岗位,人员,最终排列的顺序通常需要按权力大小.重要性等进行排 ...