js中createlement和creatTextnode属性
2024-08-23 10:46:43
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);};
这一部分的代码非常简洁,虽然分析其中的关系有些费力,但是代码简介美观,我个人更推荐这种代码显示方式。
最新文章
- 清北学堂模拟赛day7 数字碰撞
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
- [学习笔记] 七步从AngularJS菜鸟到专家(6):服务 [转]
- TextBox(只允许输入字母或者数字)
- iOS8 StoryBoard 连线diss方法
- 怎么 得到 DBGrid选中行的数据
- @@identity的用法
- Cmake新手使用日记(1)【C++11下的初体验】
- JVM学习--(二)内存模型、可见性、指令重排序
- 文件进行MD5计算
- Kali-Dos洪水攻击之Hping3
- 认真学习Linux系统让你真的有收获
- 贪吃蛇 v1.01
- OpenCV学习(23) 使用kmeans算法实现图像分割
- 详细理解servlet实现的三种方式和生命周期
- Xshell连接Ubuntu失败问题
- 《Hadoop权威指南》(Hadoop:The Definitive Guide) 气象数据集下载脚本
- 内存及字符串操作篇strlen strchar strcmp strcoll strcpy strdup strstr strtok strspn strrchr bcmp bcopy bzero index memccpy memset
- 【C#】访问泛型中的List列表数据
- 20155307 2017-2018-3 《Java程序设计》第3周学习总结