位置: 编程技术 - 正文

appendChild() 或 insertBefore()使用与区别介绍

编辑:rootadmin
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 下面,举例说明document.createElement()的用法。<div id="board"></div> 例1: 效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。 例2: 效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。 例3: 效果:在标签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> 我们可以这样写: 通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。 在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为: 效果:这个例子将在x1节点前面插入一个新的节点 又或: 效果:这个例子将在x1节点的下一个节点前面插入一个新的节点 还可为: 这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点 由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。 从这几个例子中得出: appendChild() 方法在节点的子节点列表末添加新的子节点。 insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

推荐整理分享appendChild() 或 insertBefore()使用与区别介绍,希望有所帮助,仅作参考,欢迎阅读内容。

appendChild() 或 insertBefore()使用与区别介绍

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript对象学习经验整理 1.对象的创建方法:(1)通过new运算符创建,new后面跟着一个构造函数名varobject=newObject();构造函数直接调用时通常没有返回值,它只是初始化由this值传递

JavaScript var声明变量背后的原理示例解析 只要是写过点JS代码,很简单一个var就完事了。那对于JS编译器背后它又发生了什么呢?那就一步步通过代码来讲起。x=1;alert(x);vary=function(){alert(x);varx=2;a

JavaScript的继承的封装介绍 /***当调用此函数时,只有第一次参数传入,第二个不存在的情况下,就创建类*当调用此函数时,传入了两个参数,第一个参数为基类,第二个参数则在基类的

标签: appendChild() 或 insertBefore()使用与区别介绍

本文链接地址:https://www.jiuchutong.com/biancheng/376158.html 转载请保留说明!

上一篇:JavaScript中的运算符种类及其规则介绍(javascript运算)

下一篇:JavaScript对象学习经验整理(js对象常用方法)

  • 教培行业提成一般多少
  • 一般纳税人和小规模纳税人哪个合适
  • 生产成本怎么计算
  • 有谁用过金蝶kis云专业版
  • 会计凭证审核的主要内容
  • 保险公司营销人员个人先进事迹材料
  • 发出材料汇总表金额怎么算
  • 残保金上年在职工资总额
  • 库存现金存入银行怎么记账
  • 增值税免税收入汇算清缴的时候填哪
  • 个税验证不通过怎么办
  • 学校维修维护费包括哪些
  • 个体户税务年报每年什么时候
  • 公司做贷款
  • 小规模企业交纳印花税吗
  • 机器用油怎么做成的
  • 核定征收和查账征收,交的税一样吗
  • 销售净利率范围
  • 毛利率计算公式举例说明
  • 苹果手机抖音投屏到电视怎么投屏
  • agent程序
  • Win10 20H1/20H2 KB5001391补丁今日发布(内附下载)
  • php数组函数题目
  • 企业年金基金收益
  • 苹果发布macOS更新
  • 分公司能不能独立法人
  • html中display none
  • php mysql pdo
  • 年终奖分次发跟一起发有什么区别
  • 商家为消费者提供餐具
  • 人类记忆存储在哪
  • 猿猴的作文
  • 场外期权怎么交税
  • 租入固定资产改良
  • 过路费发票抵扣2023新规定
  • 非财政补助结转是什么类科目
  • 织梦dedecms如何升级ckeditor
  • 我想问一下移动
  • 其它应收款的处理程序
  • 生产车间发生的固定资产租赁费用属于直接费用
  • 农产品购进时的会计分录
  • 非金融企业借款利息收入计入什么科目
  • 土地出让金相关政策
  • 外购产品捐赠
  • 企业合并发生的法律服务费影响利润总额吗
  • 公司注销了,账务是不是可以销毁了
  • 买一赠一是什么促销方式
  • 汽车买卖中介
  • 小规模纳税人出租不动产免征增值税
  • 扇贝的储存方式
  • 关于职工薪酬的确认和计量下列说法中不正确的是
  • 计量差错引起的原材料盘亏
  • 投资软件和信息技术服务业
  • 工厂厨房厨具
  • 小规模开票额度有限制吗
  • 应交税费应交增值税已交税金怎么用
  • 负债类科目分录
  • 公司研发项目立项
  • debian9.6安装教程
  • ubuntu功能
  • freebsd默认账户密码
  • 简述linux系统中有哪些文件类型?
  • .exe是什么软件
  • winxp升级win7教程图文
  • linux设置环境变量的命令
  • 简洁桌面怎么设置
  • win8如何查看所有程序
  • win10系统声音怎么打开
  • javascript中函数
  • React Native react-navigation 导航使用详解
  • Node.js中的construct构造函数
  • 浅谈双减背景下的高效课堂
  • linux shell脚本实例
  • js函数详解
  • 并行 python
  • python常用的库
  • 圣诞树代码html
  • python不同进制的整数之间可以直接运算
  • uk在哪里看开票截止日期
  • 海关行政处罚实施条例的适用范围
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设