JavaScript之向文档中添加元素和内容的方法
一、非DOM方法添加
1、document.write()
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function insertParagrah(txt) {
var str = "<i>";
str += txt;
str += "</i>";
document.write(str);
}
insertParagrah("Hello World!");
</script>
</head>
<body>
</body>
简单的说下:这个方法无法向特定的标签下添加内容,还有就是与MIME类型application/xhtml+xml 不兼容,虽然能实现向文档下添加内容和元素的功能,但是不是很推荐使用;
2.innerHtml属性
这个属性几乎所有的浏览器都支持,但是这个属性并不是W3C DOM的标准的组成部分,最重要的是这个属性Html5都支持。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var testdiv = document.getElementById("testdiv");
alert(testdiv.innerHTML);
}
</script>
</head>
<body>
<div id="testdiv">
<p>This is<em>my</em>Content.</p>
</div>
</body>
</html>
输出i:<p>This is<em>my</em>Content.</p>; nnerHtml毫无细节可言,如果你想要获得ID=testdiv下的细节只能通过dom的属性和方法;
innHtml就像一把大锤一样粗放,而标准化的DOM就像手术刀一样精细。大锤也会有大锤的用处,当你需要把一大段html加入到文档里时,显然用innerHtml更合适.innerHtml不仅支持读取,还支持写入;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var targetdiv = document.getElementById("targetdiv");
targetdiv.innerHTML = "<p>This is<em>my</em>Content.</p>";
}
</script>
</head>
<body>
<div id="targetdiv"></div>
</body>
</html>
二、DOM方法添加内容
1、createElement()
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var para = document.createElement("p");//创建一个p标签
var info = "nodeName:";
info += para.nodeName;
info += " nodeType:";
info += para.nodeType;
alert(info);
}
</script>
</head>
<body>
</body>
</html>
输出:nodeName:P nodeType:1 注意:根据输出我们可以判断当使用document.createElement()方法创建出<p></p>标签时他就已经存在了,虽然这个p标签还没被添加到文档树中,这种情况称之为"文档碎片";
2、appendChild()
创建完我们需要创建的标签之后,就需要将创建好的标签添加到需要添加的地方,appendChild()方法就是干这个的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var para = document.createElement("span");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
运行html文件,
成功添加;
3、createTextNode()
ok,现在我们在我们需要添加标签的地方成功了的添加了标签,接下来就是往标签里面添加文本内容了,createTextNode()就是干这个的;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var testdiv = document.getElementById("testdiv");
var para = document.createElement("span");
testdiv.appendChild(para);
var em_txt = document.createTextNode("Hello World!");
para.appendChild(em_txt);
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
成功添加; 注意appendChild的顺序,添加的顺序可以有很多种,你可以先把变迁和内容创建好,再向对应的容器append.顺序不同可能会影响最后的添加成败!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- wsl设置默认账户为root(ubuntu18.04)
- LeetCode No.14 最长公共前缀
- android异步消息机制 从源码层面解析(2)
- beego解决跨域问题:options请求、axios post请求跨域问题
- Android ListView列表实现倒计时
- [-Flutter 自组篇-] 蛛网图+绘制+动画实践
- Kotlin类型系统竟如此简单
- 以人为本 | Android 11 的消息通知
- RxJava取消订阅的各种方式的实现
- [- Flutter 基础篇 -] ListView的使用
- Emoji表情在Android JNI中的兼容性问题详解
- 一个吸顶Item的简单实现方法分享
- [- Flutter福利篇 -] Hero转场组件共享 — 附赠-路由动画工具类
- Hue执行多条语句问题
- Android仿抖音列表效果