js appendChild()方法

2026-09-06

JavaScript中的appendChild（）方法

appendChild()方法是向节点添加最后一个子节点.也可以使用此方法从一个元素向另一个元素移动元素. 案例一:向节点添加最后一个子节点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul id="mylist"> <li>

问题描述最近在做项目时,遇到一个问题,当js生成一个组件后,会注入到页面的某个节点里显示.在组件内部进行了一次注入操作,在调用组件的外部js文件中也进行了一次注入操作,结果发现页面里只生成了一份组件的代码,而并不是两份. 原因后来通过浏览器的调试工具,打断点发现所谓的注入操作其实就是appendChild方法的调用.appendChild()这个方法再熟悉不过了,把子节点插入到父节点的最后. 再复习下appendChild()这个方法的定义:将一个节点插入到指定的父节点的最末尾处(也就是成为

js实用方法记录-js动态加载css、js脚本文件

js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs('http://www.yimo.link/static/js/main.min.js',function(){alert('加载成功')}); /** * 动态加载JS * @param {string} url 脚本地址 * @param {function} callback 回调函数 */ function dynam

js appendChild与insertBefore 区别和用法

1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点. 比如:appendChild(newchild)括号里可以是创建的标签var newchild = document.createElement 2.insertBefore() 方法: 可在已有的字节点前中插入一个新的子节点.比如:insertBefore(newchild,rechild) 参数: newnode: 要插入的新节点. node: 指定此节点前插入节点 3.相同之处:插入子节点.

js调用php和php调用js的方法举例

js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="text/javascript" src="b.php?action=test"></script> <script type="text/javascript" > alert(jstext); </script> 在b

学习zepto.js(对象方法)[2]

今天来说下zepto那一套dom操作方法, prepend,append,prependTo,appendTo,before,after,insertBefore,insertAfter; 按着从内到外,从主到从,从前到后的顺序来说这八个方法. 这些方法的参数可以是一个dom节点,也可是是一个html片段,或者Zepto对象; prepend(): 将参数插入对象内部的头部; append(): 将参数插入对象内部的尾部; prependTo(): 将对象插入到参数内部的头部(可以理解为将pre

通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

jq实现的方法: jq需要在页面中引入JQ.cookie插件这是一个超轻量级插件要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoContent");//获取到input搜索框 var vlue=$.cookie('plhder');//获取cookie值 til.attr('placeholder',vlue);//把获取到的cookie值attr到搜索框中 $("#orderInfoSelectIndex opti

jquery.validate.min.js 用法方法示例

页面html 代码 <!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 runat="server">

jQuery 互相调用iframe页面中js的方法

1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.document); 这个xx就是父界面中要获取的元素的ID. 3,jquery 调用子iframe页面中js的方法: iframefunction()是子页面的方法 $(window.parent.document).contents().find("#iframename")[0].conten

JS扩展方法——字符串trim()

转自:http://www.cnblogs.com/kissdodog/p/3386480.html <head> <title>测试JS扩展方法</title> <script type="text/javascript"> // 合并多个空白为一个空白 String.prototype.ResetBlank = function() { //对字符串扩展 var regEx = /\s+/g; return this.replace(

Js apply 方法详解

Js apply方法详解我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享.. 如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1. apply和call的区别在哪里 2. 什么情况下用apply,什么情况下用call 3. apply的其他

JavaScript基础12——js的方法重载

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js的方法重载</title> <script type="text/javascript"> // JavaScript不存在方法重载 // 通过arguments数组来模拟方法重载的效果 function add() { var length = argumen

JS replace()方法-字符串首字母大写

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace()方法有两个参数,第一个参数是正则表达式,正则表达式如果带全局标志/g,则是代表替换所有匹配的字符串,否则是只替换第一个匹配串.第二个参数可以是字符串,也可以是函数.$1.$2...表示与正则表达式匹配的文本. There are many ways we can make a difference. Global change starts with you. Sign up f

JS trim()方法使用

JS trim()方法使用上有浏览器限制: 1.直接使用 string.trim() 浏览器版本限制:JavaScript Version 1.8 2.间接使用<即自己使用正则构造类trim的方法> function myTrim(x) { return x.replace(/^\s+|\s+$/gm,''); } function myFunction() { var str = myTrim(" Hello World! "); alert(str); } 参考资料:

JS同名方法，

JS同名方法只会调用最后一个方法. JS中同时绑定多个事件,先绑定的先调用.后绑定的后调用.

js一些方法的扩展

//JS扩展方法与C#的扩展方法非常相似,也是可以链式调用的,也是通过对某个类的扩展写法来实现.这个东西非常好用,如果将预先写好的方法放到一个js里面引用的话,那么后面写js将非常有趣. //下面给出一个例子: // <head> // <title>测试JS扩展方法</title> // <script type="text/javascript"> // // 合并多个空白为一个空白 // String.prototype.Reset

JS扩展方法

JS扩展方法与C#的扩展方法非常相似,也是可以链式调用的,也是通过对某个类的扩展写法来实现.这个东西非常好用,如果将预先写好的方法放到一个js里面引用的话,那么后面写js将非常有趣. 下面给出一个例子: <head> <title>测试JS扩展方法</title> <script type="text/javascript"> // 合并多个空白为一个空白 String.prototype.ResetBlank = function()

Js apply 方法具体解释

Js apply方法具体解释我在一開始看到javascript的函数apply和call时,很的模糊,看也看不懂,近期在网上看到一些文章对apply方法和call的一些演示样例,总算是看的有点眉目了,在这里我做例如以下笔记,希望和大家分享.. 如有什么不正确的或者说法不明白的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1. apply和call的差别在哪里 2. 什么情况下用apply,什么情况下用call 3. ap

学习zepto.js(原型方法)

学习zepto.js(原型方法)[1] 转载新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): 方法接收一个字符串,将连字符格式的字符串转为驼峰格式的字符串: $.camelCase("login-name"); // ->loginName $.camelCase("loginName"); // ->不作处理 (本人发现zepto中的原型方法都是

validform.js使用方法

表单验证之validform.js使用方法一.validform有什么用? 网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗.如果不是数字,弹窗. 所以要将这么多验证交给一个js去验证. 二.我现在知道的全页面js验证文件 1.jquery.validat.js 官网:http://jqueryvalidation.org/ 这东西就是放在我们的vs中的那个验证用js 这是demo:http://jqueryvalidation.org/files/

js实用方法记录-简单cookie操作

js实用方法记录-简单cookie操作设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称,值,-1,保存域); 设置cookie 测试代码:setCookie('test','hello') //保存session级的cookie到根域测试代码:setCookie('test','hello',30,false) //保存30天且保存到当前全域名 /** * 设置cookie * @