首页 > 其他分享 >添加 删除 替换 插入到某个接点的方法?

添加 删除 替换 插入到某个接点的方法?

时间:2023-02-10 10:12:16浏览次数:44  
标签:box 元素 插入 添加 接点 querySelector div document 节点

1.创建新节点

createElement() //创建一个具体的元素

//创建div元素
var div=document.createElement('div')

createTextNode() //创建一个文本节点

//创建文本
var text=document.createTextNode('hello world')

2.添加、移除、替换、插入

appendChild() //添加

//appendChild() 方法向节点添加最后一个子节点
var divs=document.createElement('div');//创建一个子节点
var box=document.querySelector('.box');//获取元素
box.appendChild(divs);//向box元素内追加divs子节点

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

remove()//删除所有的子元素

 

3.查找

getElementsByTagName() //通过标签名称

document.getElementsByTagName('span')

getElementsByClassName() //通过元素的class属性的值

document.getElementsByClassName('box')

getElementById() //通过元素Id,唯一性

document.getElementById('id_name')

querySelector()

document.querySelector('div');//通过标签
document.querySelector('.box');//通过class
document.querySelector('#box');//通过id

querySelectorAll()

//得到集合
document.querySelector('div');//通过标签 document.querySelector('.box');//通过class

 

标签:box,元素,插入,添加,接点,querySelector,div,document,节点
From: https://www.cnblogs.com/zhaofen/p/17107927.html

相关文章

  • kx00007-顺序表--插入函数
    一、顺序表结构定义#defineINIT_SIZE10 //顺序表初始容量typedefvoid(myOpFunType)(void*); //定义操作函数类型typedefintseqType; //定义顺序表元素类型......
  • vue中对象的添加属性并赋值
    vue中对象的添加属性并赋值如果在vue中给dataform={}中增加age属性并进行赋值使用this.dataform.age='18',会报this.dataform.ageundefined原因:受现代JavaScript......
  • CAD制图初学入门:如何添加CAD尺寸标注?
    在CAD制图过程中,经常会需要对CAD图纸中的部分图新添加CAD尺寸标注,可能有些刚开始进行CAD制图初学入门学习的小伙伴对此并不了解,其实很简单,接下来就让小编来给大家介绍一下......
  • ⑩ 添加筛选条件
    1实现效果2应用2.1父组件调用模板<template><Row><Formlabel-position="right":label-width="80"><Colspan="24"v-for="(conditionItem,key,index......
  • mybaits配置文件中添加显示sql语句的配置
    <!--Mybatis全局配置--><settings><!--设置当前Mybatis的日志输出,可在控制台显示sql语句--><settingname="logImpl"value="STDOUT_LOGGING"/......
  • P09:列表数据化、列表添加数据
    React16基础​​阐述​​​​让列表数据化​​​​增加服务选项​​​​解决key值错误​​​​预览​​阐述有了上节课的基础,这节课终于可以添加服务,为所欲为了,随意增加你......
  • P11:JSX代码注释、HTML添加class、JSX中解析html、JSX中label激活文本框
    React16基础​​阐述​​​​JSX代码注释​​​​JSX中的class陷阱​​​​JSX中的html解析问题​​​​JSX中``标签的坑​​阐述通过之前的教程作完“大宝剑”菜单后,如......
  • Webpack中给CSS自动添加前辍
    由于现在主流的浏览器有好几种,在编写CSS样式时,需要对各种浏览器作兼容处理,导致在写一些新的CSS样式时需要针对不同的浏览器加上不同的前辍,如果每个前辍都手动来加的话会相当......
  • 3、Packagist添加GitHub制作的composer包
    1登录packagist2点击submit,复制制作的composer包。3提交包4最终......
  • kettle 更新/插入组件 JAVA API
    packagecom.example.fg.kettle;importorg.pentaho.di.core.KettleEnvironment;importorg.pentaho.di.core.ObjectLocationSpecificationMethod;importorg.pentaho......