javascript使用appendChild追加节点实例_javascript技巧

本文实例讲述了javascript使用appendChild追加节点的方法。分享给大家供大家参考。具体分析如下:

DOM树节点的增加,实例代码如下:

复制代码 代码如下:

<html>
<head>
<script type="text/javascript">
function t(){
 var nodep = document.createElement('p');//创建p节点
 var art = document.createTextNode('你好,世界');//创建文本节点
 
 var cont = document.getElementById('container');//获取节点
 cont.appendChild(nodep);//增加节点
 nodep.appendChild(art);//增加文本节点
}
</script>
<style type="text/css">
p{width:100px;height:100px;background:green;}
#container p{width:100px;height:100px;background:blue;}
</style>
</head>
<body>
<div id="container"><p>hello world</p>
</div>
<p>说两句吧</p>
<hr />
<button onclick="t()" value="">增加节点</button>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2024-09-22 15:41:35

javascript使用appendChild追加节点实例_javascript技巧的相关文章

javascript使用appendChild追加节点实例

 这篇文章主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下     本文实例讲述了javascript使用appendChild追加节点的方法.分享给大家供大家参考.具体分析如下: DOM树节点的增加,实例代码如下: 代码如下: <html> <head> <script type="text/javascript"> function t(){

JavaScript操作选择对象的简单实例_javascript技巧

JavaScript操作选择对象的简单实例 //替换选中文本内容,参数text为要替换的内容 function SetSelectionText(text) { //非IE浏览器 if (window.getSelection) { var sel = window.getSelection(); alert(sel.rangeCount); //选区个数, 通常为 1 . sel.deleteFromDocument(); //清除选择的内容 var r = sel.getRangeAt(0)

javascript进行数组追加方法小结_javascript技巧

javascript中给数组加元素是一个非常简单的问题,javascript本身就提供了大量这类函数,我们可以使用js自带函数快速给数组增加元素了,本文就javascript进行数组追加的方法做出如下小结. 以前常用的是arr.concat(arr2)这种方法来追加数组,例子如下: 复制代码 代码如下: <script type="text/javascript">var arr = new Array(3);arr[0] = "测试数组1为 1";ar

详解JavaScript基于面向对象之继承实例_javascript技巧

javascript面向对象继承的简单实例: 作为一门面向对象的语言,继承自然是它的一大特性,尽管javascript的面向对象的实现机制和和c#和java这样典型的面向对象不同,但是继承的基本特点还是具有的,简单的说就是获得父级的方法和属性,下面是一段简单的实例,大家有兴趣可以分析一下: window.onload = function(){ function parent(age,name){ this.age = age; this.name = name; } parent.protot

Javascript单例模式的介绍和实例_javascript技巧

前言 其实和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构. 本文将会介绍Javascript中的单例模式,在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个

JavaScript+canvas实现七色板效果实例_javascript技巧

本文实例讲述了JavaScript+canvas实现七色板效果.分享给大家供大家参考,具体如下: 效果图如下: html: <canvas id="canvas" class="canvas" width="600" height="600"></canvas> css: html,body{margin: 0;padding: 0} .canvas{display: block; margin-lef

JavaScript中String.prototype用法实例_javascript技巧

本文实例讲述了JavaScript中String.prototype用法.分享给大家供大家参考.具体如下: // 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=function() { return this.replace(/[^\x00-\xff]/g,"**").length; } // 判断字符串是否以指定的字符串结束 String.prototype.EndsWith = function(str) { return this.

javascript去掉前后空格的实例_javascript技巧

代码 复制代码 代码如下: function String.prototype.Trim() { return this.replace(/(^/s*)|(/s*$)/g, ""); }   // 去掉左右空格 function String.prototype.Ltrim() { return this.replace(/(^/s*)/g, ""); }            // 去掉左空格 function String.prototype.Rtrim() {

JavaScript定时器详解及实例_javascript技巧

JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复. clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象)