博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js中createlement和creatTextnode属性
阅读量:6862 次
发布时间:2019-06-26

本文共 1560 字,大约阅读时间需要 5 分钟。

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部分

    
jsEG

 

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);};

 

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

转载于:https://www.cnblogs.com/xtdxs/p/6570567.html

你可能感兴趣的文章
带通配符的字符串匹配问题
查看>>
关于学习uCOS-II
查看>>
Servlet 中利用阿里云包fastjson-1.2.43.jar把map转为Json并返回前端
查看>>
我们为何要付出高昂的代价去获取智力?
查看>>
搜索 --- 数独求解 POJ 2676 Sudoku
查看>>
调用DLL
查看>>
1115. Counting Nodes in a BST (30)
查看>>
UVA 814 The Letter Carrier's Rounds(JAVA基础map)
查看>>
BZOJ5343[Ctsc2018]混合果汁——主席树+二分答案
查看>>
linux 如何降低入向收包软中断占比
查看>>
小知识点(不定更新)
查看>>
css绝对定位中的初始包含块问题
查看>>
智能指针
查看>>
phpcms导航栏多个栏目调用
查看>>
人脸识别 参考 转盒子
查看>>
SDUT OJ 顺序表应用2:多余元素删除之建表算法
查看>>
CSS
查看>>
Android笔记之为TextView设置边框
查看>>
【Lift】Scala Web 框架——Lift(一)准备工作
查看>>
【转载】增强学习(Reinforcement Learning and Control)
查看>>