js中可以使用creatElement方法创造一个新的元素，使用creatTextnode创造一个新的text文本元素。

之后使用appendchild插入到已存在的元素中。

**

window.onload = function () {

var testdiv = document.getElementById('testdiv');

var para = document.createElement('p');

testdiv.appendChild(para);

var txt = document.createTextNode('hello world');

para.appendChild(txt);

};

以上的例子就是使用这两个方法创建的属性，可以看到。
我们定义了一个textdiv的变量，然后或许testdiv这个id， 再定义一个新的变量para，**创造一个新的元素，
再将para插入到testdiv元素中。
之后创建一个新的文本元素，之后插入到para中。

例子2：

html部分

<!DOCTYPE html><html lang="en">

<head>

<meta charset="UTF-8">

<title>jsEG</title>

<script src="../js/js01.js">

</script>

</head>

<body>

<div id="testdiv">

</div>

</body>

</html>

js部分

window.onload = function () {

var para = document.createElement('p');

var txt1 = document.createTextNode('txt1');

para.appendChild(txt1);

var emphasis = document.createElement('em');

var txt2 = document.createTextNode('txt2');

emphasis.appendChild(txt2);

para.appendChild(emphasis);

var txt3 = document.createTextNode('txt3');

para.appendChild(txt3);

var testdiv = document.getElementById('testdiv');

testdiv.appendChild(para);

};

这一部分将变量与赋值放在一起，可以很好的看出来变量与子代的关系。
缺点是，代码显得杂乱。

window.onload = function () {

var para = document.createElement('p');

var txt1 = document.createTextNode('txt1');

var emphsis = document.createElement('em');

var txt2 = document.createTextNode('txt2');

var txt3 = document.createTextNode('txt3');

var testdiv = document.getElementById('testdiv');    

para.appendChild(txt1);

emphsis.appendChild(txt2);

para.appendChild(txt3);

testdiv.appendChild(para);};

这一部分的代码非常简洁，虽然分析其中的关系有些费力，但是代码简介美观，我个人更推荐这种代码显示方式。

js中createlement和creatTextnode属性的更多相关文章

  1. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  2. js中Frame框架的属性获取(1)

    js中window和document对象及如何操作iframe 一. window对象 . 什么是window对象? Window对象表示浏览器打开的窗口.如果文档包含iframe或者是frame标签 ...

  3. JS中访问对象的属性

    方式一: 对象名.属性名;   方式二: 对象名["属性名"];   ★注意:方式二中,属性名以字符串的形式出现在方括号中,这意味着通过方式二访问属性的话,可以实现“动态访问对象的 ...

  4. JS中的可枚举属性与不可枚举属性以及扩展

    在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...

  5. js中的可枚举属性与不可枚举属性

    在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...

  6. JS中firstChild,lastChild,nodeValue属性

    childNodes 在JavaScript中,使用childNodes属性可以返回一个数组,这个数组包含给定元素节点的全体子节点. firstChild firstChild 这句代码等价于 目标元 ...

  7. js中遍历对象的属性和值

    今天想看一下js的数组遍历的内容,搜索到了一个关于对象遍历写好的函数,保留一下.以后好用. function allPrpos ( obj ) {   // 用来保存所有的属性名称和值   var p ...

  8. js中的访问器属性中的getter和setter函数实现数据双向绑定

    嗯,之前在读js红宝书的时候,在对象那一章有介绍属性类型.第一种数据类型指的是数据属性,第二种是访问器属性.在初识vue的时候,其双向数据绑定也是基于访问器属性中的getter和setter函数原理来 ...

  9. 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、

    location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...

随机推荐

  1. Android图像处理之BitMap(2)

    Bitmap 相关 1. Bitmap比较特别 因为其不可创建 而只能借助于BitmapFactory 而根据图像来源又可分以下几种情况: * png图片 如:R.drawable.tianjin J ...

  2. java关于时间的相关操作

    /** * 获取当天时间零点 * @return */ public Date gettoday(){ SimpleDateFormat sdf = new SimpleDateFormat(&quo ...

  3. MRC转ARC

    转载请注明出处:http://blog.csdn.net/cywn_d/article/details/18222671 1.删除所有retain,release和autorelease. 2.把原来 ...

  4. jquery中ajax原生代码的分析模仿

    function ajax(obj){     var defaults = {         url: "#",         data: {},         type: ...

  5. BZOJ2007 NOI2010 海拔 平面图转对偶图 最小割

    题面太长啦,请诸位自行品尝—>海拔 分析: 这是我见过算法比较明显的最小割题目了,很明显对于某一条简单路径,海拔只会有一次变换. 而且我们要最终使变换海拔的边权值和最小. 我们发现变换海拔相当于 ...

  6. 笔试算法题（07）：还原后序遍历数组 & 半翻转英文句段

    出题:输入一个整数数组,判断该数组是否符合一个二元查找树的后序遍历(给定整数数组,判定其是否满足某二元查找树的后序遍历): 分析:利用后序遍历对应到二元查找树的性质(序列最后一个元素必定是根节点,从左 ...

  7. 零基础入门学习Python（23）--递归：这帮小兔崽子

    知识点 我们都知道兔子繁殖能力是惊人的,如下图: 我们可以用数学函数来定义: 假设我们需要求出经历了20个月后,总共有多少对小兔崽子? 迭代实现 def fab(n): n1 = 1 n2 = 1 n ...

  8. Kvm：通过 libvirt 远程管理虚拟机

    1.通过qemu+ssh方式 2.通过qemu+tcp方式 主控端需要安装相关工具包: #yum groupinstall "Virtualization" #yum instal ...

  9. 当java web项目部署到服务器上时，无法将图片等媒体文件保存到服务器的最终奥义

    今天,我在部署web项目至云服务器上(Tomcat8.0)时,突然发现我的应用,无法上传图片,视频等多媒体文件了,一再检查自己的代码逻辑没有问题之后,逐一排查,首先想到的就是看一下控制台打印的日志,日 ...

  10. Win 2003 创建 IP 安全策略来屏蔽端口的图文教程

    (本文用示例的方法讲解 IP 安全策略的设置方法,具体的设置还是要根据个人实际的需要来设置.另外 Windows Server 2008 与此类似.千一网络编辑注) IP安全性(Internet Pr ...