<!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. simple_tag,filte,分页以及cookie和装饰器

    自定义simple_tag 内置的方法 首先Django中包含了很多内置的方法: 这里通过lower实现 在views视图函数中写如下代码: def tp3(request): name= " ...

  2. python成长之路-----day1----笔记（1）

    1.python语言介绍 python的创始人:Guido Van Rossum 2.python是一门什么样的语言 编程语言主要从以下几个角度进行分类:编译型,静态型,动态性,强类型定义语言和弱类型 ...

  3. 调试一个socket通信bug的心理过程和反思

    背景交代.最近在玩lua的服务端编码, 有项目A,B,AB都是同一个模子的.我手上有A的winsocket客户端和服务端的代码,B项目早期的一份linux下的lua client.服务端.客户端都是L ...

  4. MOSS（Microsoft Office Sharepoint Server）升级2013遇到的PDF权限问题及解决方案

    最近公司MOSS从2007升级到了2013,遇到了一个很呕心的问题: 为了保护公司资料安全,我们一直使用RMS给文档增加权限(信息权限管理 (IRM)),只有公司内部员工可以阅读.RMS加权限的范围仅 ...

  5. Leetcode: Convex Polygon

    Given a list of points that form a polygon when joined sequentially, find if this polygon is convex ...

  6. MFC打开系统关于对话框

    HICON Icon = LoadIcon(AfxGetInstanceHandle(),MAKEINTRESOURCE(IDR_MAINFRAME)); //IDR_MAINFRAME为图标的ID ...

  7. java.sql.SQLException: ORA-00942: 表或视图不存在

    1.检查JDBC数据源是否配置正确:2.检查表或视图名称是否写错:3.检查Java中数据源的数据库用户是否具有引用该表或视图的权限:

  8. 用mac系统制作mac系统启动盘

    1.找一个大于8G的U盘,最好3.0接口 2.将U盘插入电脑,打开电脑的磁盘工具,将其抹去为“Mac OS扩展”格式,名称随意 3.下载一个mac系统dmg镜像 4.在系统中打开镜像 5.打开终端,输 ...

  9. rdesktop的使用方法

    工作时一般是开两台电脑 ,一台linux,一台windows,以前也用过虚拟机什么的,但是 有时候 跑起来拖泥带水的十分不爽,所以慢慢的就习惯了两台电脑的工作方式,一般我大部时间都在linux下面.用 ...

  10. Maximo7自定义实现WebService

    最近很多人在群里聊这个话题,我就也一个hello world来实现一下. 1.自定义一个类,继承于AppService 代码如下: