js的DOM（节点操作）
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
insertBefore(newnode,node);
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
例子：现创建一个新li标签，内容为&php&,并将新创建的li插入到内容为HTML的标签前；
&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&ul id=&test&&&li&JavaScript&/li&&li id=&html&&HTML&/li&&/ul&
&script type=&text/javascript&&
var otest = document.getElementById(&test&);
newnode=document.createElement(&li&);
node=document.getElementById(&html&);
newnode.innerHTML=&PHP&;
otest.insertBefore(newnode,node);
/*要先取node的值并且创建newnode，使用格式是父节点.inserBefore（newnode,node）*/
注意:&otest.insertBefore(newnode,node); 也可以改为:&&otest.insertBefore(newnode,otest.childNodes[0]);&
JavaScript
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
nodeObject.removeChild(node)
node ：必需，指定需要删除的节点。
定义clearText()函数，完成节点内容的删除。
1. 删除该节点的内容，先要获取子节点。
2. 然后使用循环遍历每个子节点。
3. 使用removeChild()删除节点。
&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&div id=&content&&
&h1&html&/h1&
&h1&php&/h1&
&h1&javascript&/h1&
&h1&jquery&/h1&
&h1&java&/h1&
&script type=&text/javascript&&
function clearText() {
var content=document.getElementById(&content&);
// 在此完成该函数
/*把空格去掉，content别忘了.childNodes*/
for(var i=0;i&content.childNodes.i++){
if(content.childNodes[i].nodeType==1){
var x=content.removeChild(content.childNodes[i]);
document.write(&删除节点的内容：&+x.innerHTML+&&br/&&);
&button onclick=&clearText()&&清除节点内容&/button&
注意:&把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null&值，代码如下:
输出结果为：删除节点的内容：html
删除节点的内容：php
删除节点的内容：javascript
删除节点的内容：jquery
删除节点的内容：java
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。&
node.replaceChild (newnode,oldnew )
newnode : 必需，用于替换 oldnew 的对象。&
oldnew : 必需，被 newnode 替换的对象。
例子：补充函数&replaceMessage() 代码，实现将 b 标签替换成 i 标签。
&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&div&&b id=&oldnode&&JavaScript&/b&是一个很常用的技术，为网页添加动态效果。&/div&
&a href=&javascript:replaceMessage()&& 将加粗改为斜体&/a&
&script type=&text/javascript&&
function replaceMessage(){
var newnode=document.createElement(&i&);
newnode.innerHTML=&javascript&; 用这个可以替换以下两行代码*/
var newnodeText=document.createTextNode(&Javascript&);
/*createTextNode()添加节点文本*/
newnode.appendChild(newnodeText);
/*添加子节点？*/
var oldNode=document.getElementById(&oldnode&);
oldNode.parentNode.replaceChild(newnode,oldNode);
1.&当 oldnode 被替换时，所有与之相关的属性内容都将被移除。&
2. newnode 必须先被建立。
createElement()方法可创建元素节点。此方法可返回一个
Element 对象。
document.createElement(tagName)
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
我们来创建一个按钮，代码如下：
&script type=&text/javascript&&
var body = document.
var input = document.createElement(&input&);
input.type = &button&;
input.value = &创建一个按钮&;
body.appendChild(input);
效果：在HTML文档中，创建一个按钮。
我们也可以使用setAttribute来设置属性，代码如下：
&script type=&text/javascript&&
var body= document.
var btn = document.createElement(&input&);
btn.setAttribute(&type&, &text&);
btn.setAttribute(&name&, &q&);
btn.setAttribute(&value&, &使用setAttribute&);
btn.setAttribute(&onclick&, &javascript:alert('This is a text!');&);
body.appendChild(btn);
效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。 当点击这个文本框时，会弹出对话框“This is a text!”。
例子：实现在HTML文档中创建一个链接，并设置相应属性。
1. 在右边编辑器补充代码，完善createa(url,text)创建链接函数，参数1为链接地址，参数2为链接文本。函数中添加链接地址、文本、文字颜色属性。
2. 调用createa函数，链接地址 ，文本为百度
&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&script type=&text/javascript&&
var main = document.
//创建链接
function createa(url,text)
var link=document.createElement(&a&);
link.href=
link.innerHTML=
link.style.color=&red&;
main.appendChild(link);
// 调用函数创建链接
createa(&/&,&百度&);
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
document.createTextNode(data)
data :&字符串值，可规定此节点的文本
例子：创建一个P标签，设置className属性，使用createTextNode创建文本节点&I love JavaScript!&。
&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&style type=&text/css&&
height:100
background-color:#CCC;}
&script type=&text/javascript&&
var body=document.
var newnode=document.createElement(&p&);
newnode.className=&message&;
var nodeText=document.createTextNode(&I Love Javascript！&);
newnode.appendChild(nodeText);
body.appendChild(newnode);
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？JS创建标签的原生函数（转）
&&&&& 分析代码时，发现自己的盲点&&document.createElement()，冲浪一番，总结了点经验。
&&&&& document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
&&&&&&下面，举例说明document.createElement()的用法。&div id="board"&&/div&
&&&&&&& &script type="text/javascript"& &&&&&&&&&&& var board = document.getElementById("board"); &&&&&&&&&&& var e =&document.createElement("input"); &&&&&&&&&&&&e.type = "button";
&&&&&&&&&&& e.value = "这是测试加载的小例子"; &&&&&&&&&&& var object = board.appendChild(e); &&&&&&& &/script&
效果：在标签board中加载一个按钮，属性值为&这是测试加载的小例子&。&
&&&&&&& &script type="text/javascript"& &&&&&&&&&&& var board = document.getElementById("board"); &&&&&&&&&&& var e2 = document.createElement("select"); &&&&&&&&&&& e2.options[0] = new Option("加载项1", ""); &&&&&&&&&&& e2.options[1] = new Option("加载项2", ""); &&&&&&&&&&& e2.size = "2"; &&&&&&&&&&& var object = board.appendChild(e2); &&&&&&& &/script&
效果：在标签board中加载一个下拉列表框，属性值为&加载项1&和&加载项2&。&
&&&&&&& &script type="text/javascript"& &&&&&&&&&&& var board = document.getElementById("board");&&&&&&&&&&& &&&&&&&&&&& var e3 = document.createElement("input"); &&&&&&&&&&&&e4.setAttribute("type", "text");
&&&&&&&&&&& e4.setAttribute("name", "q"); &&&&&&&&&&&&e4.setAttribute("value", "使用setAttribute"); &&&&&&&&&&& e4.setAttribute("onclick", "javascript：　alert('This is a test!');");&&&&&&&&&&& &&&&&&&&&&& var object = board.appendChild(e3); &&&&&&& &/script&
效果：在标签board中加载一个文本框，属性值为&使用setAttribute&。&当点击这个文本框时，会弹出对话框&This is a test!&。
&&&&&&&&根据上面例子，可以看出，可以通过加载对象的属性来设置，参数是相同的。使用e.type="text" 和 e.setAttribute("type","text")效果是一致的。
&&&&&&&&下面，我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同。
&&&&&&&&比如我们要在下面这个div中插入一个子节点P时：&div id="test"&&p id="x1"&Node&/p&&p&Node&/p&&/div&
我们可以这样写：
&script type="text/javascript"& & var oTest = document.getElementById("test"); & var newNode = document.createElement("p"); & newNode.innerHTML = "This is a test"; & //测试从这里开始 & //appendChild方法： & oTest.appendChild(newNode); & //insertBefore方法： & oTest.insertBefore(newNode,null); &/script&
&&&&& 通过以上的代码，可以测试到一个新的节点被创建到了节点div下，且该节点是div最后一个节点。很明显，通过这个例子，可以知道appendChildhild和insertBefore都可以进行插入节点的操作。
　　&在上面的例子中有这样一句代码：oTest.insertBefore(newNode,null)&，这里insertBefore有2个参数可以设置，第一个是和appendChild相同的，第二却是它特有的。它不仅可以为null，还可以为：
&script type="text/javascript"& & var&oTest = document.getElementById("test"); & var refChild = document.getElementById("x1"); & var newNode = document.createElement("p"); & newNode.innerHTML = "This is a test"; & oTest.insertBefore(newNode,refChild); &/script&
效果：这个例子将在x1节点前面插入一个新的节点
&script type="text/javascript"& & var&oTest = document.getElementById("test"); & var refChild = document.getElementById("x1"); & var newNode = document.createElement("p"); & newNode.innerHTML = "This is a test"; & oTest.insertBefore(newNode,refChild.nextSibling); &/script&
效果：这个例子将在x1节点的下一个节点前面插入一个新的节点
&script type="text/javascript"& & var&oTest = document.getElementById("test"); & var newNode = document.createElement("p"); & newNode.innerHTML = "This is a test"; & oTest.insertBefore(newNode,oTest.childNodes[0]);&& &/script&
　　这个例子将在第一子节点前面插入一个新的节点，也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点，但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来，发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。
　　从这几个例子中得出：
　　appendChild() 方法在节点的子节点列表末添加新的子节点。
　　insertBefore() 方法在节点的子节点列表任意位置插入新的节点。js 声明函数(函数创建)详解-js教程-网页制作-壹聚教程网js 声明函数(函数创建)详解
在javascript中函数创建与声明函数有常用的自定义函数与匿名函数下面我来分别介绍这些函数的用法
一般我们在写JavaScript的时候，都喜欢先命名一个空函数(如代码1)，我感觉这样会消耗一些性能，而且代码写得还多了。其实可以直接声明想要写的函数，不用先声明一个空函数(如代码2)。
定义函数(声明函数)可以有三种方法：正常方法、构造函数、函数直接量。
最简单的声明javascript函数的方法和我们其他编程语言没有区别，function(param){}
function myFunction() {
&&& this.myMethod = function() {}
var myObject = new myFunction();
var myObject = {
&&& myMethod: function() {}
如果函数不包含return 语句，只执行函数体内语句，并返回
构造函数方法：new Function();
//构造函数方式定义javascript函数
var add = new Function('a','b','return a+b;');
上面的代码可能很简单大家会看不明白，下面我们接着看。
首先看一下JavaScript最常见的四种函数定义：
1.用Function构造函数定义的函数，代码如下：
var multiply = new Function('x', 'y', 'return x *');
2.函数声明，这种方式也是最为常见的一种：
function multiply(x, y) {&&&& return x * }
3.函数表达式，声明为匿名函数然后赋值给一变量，很常见的方式：
var multiply = function(x, y) {&&&& return x * }
4.函数表达式，但是函数声明为命名函数再赋值给一变量，长得跟上一种方式真像：
var multiply = function multi(x, y) {&&&& return x * }
首先比较一下函数名，以及将函数赋值给的那个函数变量直接的关系，真绕&&直观一点儿，从刚刚的例4说吧，就是multiply这个函数变量与multi这个函数名的关系：
◦函数名是不能够被修改的，相反的，函数变量是可以重新被赋值的。函数变量可以被重新赋值应该很好理解，我们第4个例子刚刚定义的multiply这个变量，看它不顺眼，重新赋值为：
multiply = function(x, y) {&&& return x + }
立马摇身一变，从乘法变成加法了。但是multi这个函数变量想变就是不可能的了，函数定义已经在那儿了，只要还保留这它的引用，它就是不会变的，可能这里不大好理解，先这样想着，往下看，慢慢就应该能理解了。
◦函数名同时是无法在函数外部使用的，它只在函数体内部可见，一个很简单的例子：
var foo = function bar() {&&&& alert('hello'); } foo(); // 提示&hello&字符串 bar(); // 执行报错，bar未定义
和明显，这里的bar确实是一个函数名，但是它确实不能在外部调用。这时候肯定会有童鞋问干嘛这个例子还是长得那么乖，和例4一个样，怎么不用例2的方式呢？问得好，且听我慢慢分解。
◦继续说例4，我们可以看见函数名（multi）和函数变量(multiply)，本不相同，其实两者根本就没有任何关系，因此没有保持一致的必要。说到这儿，我想上面4个例子应该可以精简到3个，例2和例4本质应该是一致的。什么，不信？嘻嘻，我还得继续卖关子哈~继续读下去~~
我们发现例2和例4相比，只不过少了var的函数变量，而例3与例4相比，只不过少了那个函数名，这里从现象上看，例2和例4的本质是相同的，铁证如下：
function foo() {} alert(foo);
// 提示包含&foo&的函数名
var bar = alert(bar);
// 提示依然只包含&foo&的函数名，和bar半毛钱关系都没有
的确是铁证吧？上面的类似例2的代码结合起来写是不是就成例4的方式了？正确，这就是我刚刚所说的两者本质应该相同，只是用例2方式定义函数的时候，JS引擎帮我们做了一些事情，比如声明了函数名为multiply的函数，同时还悄悄定义了一个也叫multiply的变量，然后赋值给这个变量，两个完全一样的名字，我们自以为在使用函数名multiply的时候，实际是在用multiply这个函数变量，晕了吧~说实话，我也晕了~~总之我们调用的时候，实在用函数变量调用，而函数名是无法在外部调用函数的，因此有了我上述的推断。
但是这里要提到的一个小小的差别，函数声明方式定义的函数，与构造函数声明的或者函数表达式声明的不同之处在于，函数声明方式的函数可以在函数定义之前就调用&&不说了，还是看代码：
foo(); // 提示Foo
function foo() {&&&& alert('Foo'); } bar();
// 哥们，和上面确实不一样，就不要逞能，这不报错了？提示bar未定义
var bar = function() {&&&& alert('Bar'); }
再说说构造函数声明的函数，这样声明的函数是不会继承当前声明位置的作用域，它默认只会拥有全局作用域，然而这个是其他几种函数声明方式也一样有的，如下：
function foo() {
&&& var hi = 'hello';
&&& //return function() {
&&& //&&& alert(hi);
&&& return Function('');
// 执行效果大家自己跑一下看看
执行效果大家自己跑一下看看
可以想见，用构造函数声明返回的这个函数执行必然报错，因为其作用域（即全局作用域）中没有hi这个变量。
还有一点，就是往往大家要说构造函数方式声明的函数效率要低，这是为什么呢？今天从文档是得知是因为另外3种方式申明的函数只会被解析一次，其实他们存在于闭包中，但是那也只与作用域链有关，函数体是只会被解析一次的。但是构造函数方式呢，每次执行函数的时候，其函数体都会被解析一次，我们可以想想这样声明的函数是一个对象，其中存放了参数以及函数体，每次执行的时候都要先解析一次，参数和函数体，才会执行，这样必然效率低下。具体实验不知道如何做？
最后说一个大家都不怎么注意的地方，什么时候看似函数声明方式的方式却不是函数生命方式（还是这么绕~简单点儿说，就是例2的方式什么时候在不经意间就成其他方式了）：
◦当成为表达式的一部分，就如同例3和例4。
◦不再是脚本本身或者函数的&源元素&（source element）。什么是源元素呢？即在脚本中的非嵌套语句或者函数体（A &source element& is a non-nested statement in the script or a function body），例如：
var x = 0;&&&&&&&&&&&&&& // source element&&
if (x == 0) {&&&&&&&&&&& // source element&&
&& x = 10;&&&&&&&&&&&&&& // not a source element, 因为嵌套在了if语句里
&& function boo() {}&&&& // not a source element, 因为嵌套在了if语句里
function foo() {&&&&&&&& // source element&&
&& var y = 20;&&&&&&&&&& // source element&&
&& function bar() {}&&&& // source element&&
&& while (y == 10) {&&&& // source element&&
&&&&& function blah() {} // not a source element, 因为嵌套在了while语句里
&&&&& y++;&&&&&&&&&&&&&& // not a source element, 因为嵌套在了while语句里
源元素的概念大概有了理解，继续刚刚说的函数声明，请看：
// 函数声明
function foo() {}&&
// 函数表达式
(function bar() {})&&
// 函数表达式
x = function hello() {}&&
if (x) {&&
&& // 函数表达式
&& function world() {}&&
// function statement&&
function a() {&&
&& // function statement&&
&& function b() {}&&
&& if (0) {&&
&&&&& // 函数表达式
&&&&& function c() {}&&
最后这里说一下我自己的理解，之所以要区分函数声明与非函数声明，因为在我看了，函数声明方式的函数定义，在JS解析引擎执行的时候会将其提前声明，也就是像我们刚刚上面说的那样，可以在函数定义之前使用，实际上是解析引擎在我们使用前已经将其解析了，但是非函数声明式，就像表达式函数声明，JS解析引擎只会把var声明的变量提前定义，此时变量值为undefined，而真正对这个变量的赋值是在代码实际所在位置，因此上述提到报错都是undefined，实际变量已经定义了，只是还没有赋值，JS解析引擎不知道它为函数。
上一页： &&&&&下一页：相关内容温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(1034)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'JS内置函数与常用JS-Browser-HtmlDOM对象',
blogAbstract:'JS内置函数不从属于任何对象，在JS语句的任何地方都可以直接使用这些函数。JS中常用的内置函数如下:
1、eval(str)接收一个字符串形式的表达式，并试图求出表达式的值。作为参数的表达式可以采用任何合法的操作符和常数。如果参数中包含JS命令，这些命令也可以被执行，就像这些命令是JS程序的一部分一样。',
blogTag:'函数,返回,字符串,math,js',
blogUrl:'blog/static/0',
isPublished:1,
istop:false,
modifyTime:4,
publishTime:6,
permalink:'blog/static/0',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'-1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}}