javascript dom追加内容实现示例

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function util(){
var elm=function(){
return document.getElementById("testdiv");
}
var createtxt=function(){
var textnode=document.createTextNode("测试！");
var divnode=document.createElement("div");
divnode.appendChild(textnode);
return divnode;
}

this.process=function(){
elm().appendChild(createtxt());
}
}

var c=new util();
setInterval("c.process()",2000);
</script>

</head>

<body>
<div id="testdiv"></div>
</body>
</html>

赞 (0)

相关推荐

  • javascript dom追加内容实现示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 一文秒懂JavaScript DOM操作基础

    一文秒懂JavaScript DOM操作基础

    DOM概念 DOM:document object model : 文档对象模型 通过js去操作HTML的代码,添加元素,删除元素... 获取元素 (1)getElementById 通过id获取,获取到的是一个元素 (2)getElementsByTagName 通过标签名获取,获取到的是一个元素集合(数组) (3)getElementsByClassName 通过class获取,获取到的是一个元素集合(数组) (4)getElementsByName 通过name属性获取,获取到的是一个元素

  • JavaScript实现元素滚动条到达一定位置循环追加内容

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ background-color: #eee; } #contents{ margin:30px auto; width

  • JavaScript实现的DOM绘制柱状图效果示例

    JavaScript实现的DOM绘制柱状图效果示例

    本文实例讲述了JavaScript实现的DOM绘制柱状图效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net JavaScript DOM绘制柱状图</title> <

  • jQuery操作元素追加内容示例

    本文实例讲述了jQuery操作元素追加内容.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作文档结构</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type

  • JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    本文实例讲述了JavaScript DOM节点操作方法.分享给大家供大家参考,具体如下: 使用DOM可以新建HTML元素,也可以删除已有的HTML元素. (一)新建元素: <script> //创建新的 <p> 元素 var newEle=document.createElement("p"); //创建文本节点 var node=document.createTextNode("这是使用Javascript创建的新段落."); //将文本节

  • JavaScript DOM节点操作方法总结

    JavaScript DOM节点操作方法总结

    节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的

  • JavaScript DOM 对象深入了解

    JavaScript DOM 对象深入了解

    什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起

  • JS实现DOM删除节点操作示例

    JS实现DOM删除节点操作示例

    本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t

  • JavaScript DOM元素常见操作详解【添加、删除、修改等】

    本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI

随机推荐