<!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. jqurey datatable tableTools 自定义button元素 以及按钮自事件

    版本 1.10.4 "dom": 'T<"clear">lfrtip', "tableTools": { //"sSw ...

  2. 《 spring mvc 》学习计划

    第一章:1月1日-1月2日 第二章:1月3日 第三章:1月4日 第四章:1月5日 第五章:1月6日-1月7日 第六章:1月8日 第七章:1月9日 第八章:1月10日 第九章:1月11日-1月12日 第 ...

  3. 关于Java运算中类型自动提升的问题

    1.表达式中的自动类型提升: 表达式求值时,Java自动的隐含的将每个byte.short或char操作数提升为int类型,这些类型的包装类型也是可以的. 例如:short s1 = 1; s1 =  ...

  4. 向ES6看齐，用更好的JavaScript（一）

    众所周知,JavaScript作为弱类型语言,一直是精华与糟粕共存,许多"诡异"的地方我们不得不接受并使用.其实ES6(又称ECMAScript 2015)在2015年6月就已经正 ...

  5. 手贱的回忆录 --- L版openrc密码修改（OS_PASSWORD）

    ---恢复内容开始--- 刚刚部署完L版,发现默认登录的管理员账号在41.42.43的openrc文件中,登录名是admin,登录密码却是一串随机码,于是想修改一个简单易记的密码,手贱的把OS_PAS ...

  6. java版模拟浏览器下载百度动漫图片到本地。

    package javaNet.Instance.ImageDownload; import java.io.BufferedReader; import java.io.File; import j ...

  7. Samba文件服务器详细配置步骤

    准备安装 环境:CentOS 6.3_x64bit 安装:Minimal(最小) 1.配置IP地址 2.挂载:[root@localhost ~]# mount -t iso9660 /dev/cdr ...

  8. html5，video元素

    <video src="1.mp4" controls="" width="500"  height="300" ...

  9. Mount DVD on CentOS

    Mount DVD on CentOS need to mount CD/DVD on CentOS Temporarily or Permanently? Here’s the Process Us ...

  10. YbSoftwareFactory 代码生成插件【二十】：DynamicObject的序列化

    DynamicObject 是 .NET 4.0以来才支持的一个类,但该类在.NET 4.0下未被标记为[Serializable] Attribute,而在.NET 4.5下则被标记了[Serial ...