<!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. swift language

    API reference Swift UIKit Swift 菜鸟教程 Great Installed Visual Studio Code, I found I cannot open it fr ...

  2. iis配置js支持读取json文件配置

    默认情况下,iis不支持解析.json文件,这就需要我们自己在iis下配置方法一:iis配置1.点击开始菜单选择控制面板: 2.控制面板内点击管理工具,选择Internet信息服务(IIS)管理器. ...

  3. （转）学习使用Jmeter做压力测试(三)--数据库测试

    数据库测试 JMeter可以做为Web服务器与浏览器之间的代理网关,以捕获浏览器的请求和Web服务器的响应,这样就可很容易的生成性能测试脚本. 根据脚本,JMeter可通过线程组来模拟真实用户对Web ...

  4. Docker相关文档

    网上找到的一个入门级Docker学习笔记,写的不错,值得一看. 转自:http://www.open-open.com/lib/view/open1423703640748.html#articleH ...

  5. Gulp自动添加版本号(转载)

    本文转载自: gulp自动添加版本号

  6. 用自己赚的钱第一次坐飞机 那feel倍儿爽

    马年春晚上,歌手大张伟的神曲<倍儿爽>如今已传遍大街小巷.其实,不管人家到底有没有炒作,能让我们这些观众感觉到放松.乐呵,那就是一个成功的春晚节目.而今年,我也如同这歌中唱的一样,活得倍儿 ...

  7. 1．<%@Page%>中的Codebehind、AutoEventWireup、Inherits有何作用？

    AutoEventWireup --- 指示是否自动启用页事件. Codebehind --- 指示后台代码文件. Inherits --- 继承类. AutoEventWireup:指示该页的事件是 ...

  8. .NET组件控件实例编程系列——5.DataGridView数值列和日期列

    在使用DataGridView编辑数据的时候,编辑的单元格一般会显示为文本框,逻辑值和图片会自动显示对应类型的列.当然我们自己可以手工选择列的类型,例如ComboBox列.Button列.Link列. ...

  9. 该字符串未被识别为有效的 DateTime

    开发语言C#,System.Data.SQLite.dll驱动. SQLserver数据库转换为SQLite数据库时,日期类型默认转为DATETIME. 执行查询SQL语句,数据为空(查询不到数据时) ...

  10. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...