原生js追加html代码,原生js动态添加元素
div.insertAdjacentElement("beforeBegin", document.createElement("p")); //在div之前添加p元素
div.insertAdjacentElement("afterBegin", document.createElement("p")); //div所有子元素之前
div.insertAdjacentElement("beforeEnd", document.createElement("p")); //div所有子元素之后
div.insertAdjacentElement("afterEnd", document.createElement("p")); //div之后
div.insertAdjacentHTML("beforeBegin", "
3
4"); //添加内容
div.insertAdjacentHTML("afterBegin", "
3
4");
div.insertAdjacentHTML("beforeEnd", "
3
4");
div.insertAdjacentHTML("afterEnd", "
3
4");
div.insertAdjacentText("beforeBegin", "the sky is mine");
div.insertAdjacentText("afterBegin", "the sky is mine");
div.insertAdjacentText("beforeEnd", "the sky is mine");
div.insertAdjacentText("afterEnd", "the sky is mine");
div.innerHTML = "
3
4";
div.innerText = "
3
4";//注意这两个效果不一样 这就是 text 和 html 的区别
div.appendChild(document.createElement("p")); //这个就等于上面第三个
div.insertBefore(document.createElement("p"),document.getElementsByTagName("p")[1]);//没什么卵用
react 代码参考
fun = (proxy) => {
const currentTargetDom = ReactDOM.findDOMNode(proxy.currentTarget);
if(!currentTargetDom){
return;
}
//在点击元素之后添加兄弟元素li
currentTargetDom.insertAdjacentHTML('afterEnd','
123
')
};
react中原生js添加,移除class,设置属性的值
//react中原生js添加,移除class,设置属性的值
var deleteEle = document.querySelectorAll(`td[title="${this.formatDate(time)}"]`);
//删除类名
deleteEle[0].classList.remove('ant-calendar-selected-end-date', 'ant-calendar-selected-start-date', 'ant-calendar-selected)
var ele = document.querySelectorAll(`td[title="${this.formatDate(time)}"]`);
//设置属性值
ele[0].childNodes[0].setAttribute('aria-selected', true);
//添加类名
ele[0].classList.add('ant-calendar-selected-end-date', 'ant-calendar-selected-start-date', 'ant-calendar-selected-day')
a: 添加类名 currentTargetDom.nextSibling.classList.add('hidden')
b: 删除类名 currentTargetDom.nextSibling.classList.remove('hidden')
1.访问节点
document.getElementById(id);
返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name);
返回带有指定名称的节点集合
注意:Elements
document.getElementsByTagName(tagname);
返回带有指定标签名的对象集合
注意:Elements
document.getElementsByClassName(classname);
返回带有指定class名称的对象集合
注意:Elements
2.生成节点
document.createElement(eName);
创建一个节点
document.createAttribute(attrName);
对某个节点创建属性
document.createTextNode(text);
创建文本节点
3.添加节点
document.insertBefore(newNode,referenceChild);
在某个节点前插入节点
parentNode.appendChild(newNode);
给某个节点添加子节点
4.复制节点
cloneNode(true | false);
复制某个节点
参数:是否复制原节点的所有属性
5.删除节点
parentNode.removeChild(node)
删除某个节点的子节点
node是要删除的节点
注意:IE会忽略节点间生成的空白文本节点(例如,换行符号),而Mozilla不会这样做。在删除指定节点的时候不会出错,但是如果要删除最后一个子结点或者是第一个子结点的时候,就会出现问题。这时候,就需要用一个函数来判断首个子结点的节点类型。
元素节点的节点类型是 1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法,我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。
6.修改文本节点
appendData(data);
将data加到文本节点后面
deleteData(start,length);
将从start处删除length个字符
insertData(start,data)
在start处插入字符,start的开始值是0;
replaceData(start,length,data)
在start处用data替换length个字符
splitData(offset)
在offset处分割文本节点
substringData(start,length)
从start处提取length个字符
7.属性操作
getAttribute(name)
通过属性名称获取某个节点属性的值
setAttribute(name,value);
修改某个节点属性的值
removeAttribute(name)
删除某个属性
8.查找节点
parentObj.firstChild
如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用
parentObj.firstChild.firstChild.....
parentObj.lastChild
获得一个节点的最后一个节点,与firstChild一样也可以进行递归使用
parentObj.lastChild.lastChild.....
parentObj.childNodes
获得节点的所有子节点,然后通过循环和索引找到目标节点
9.获取相邻的节点
neborNode.previousSibling :获取已知节点的相邻的上一个节点
nerbourNode.nextSlbling: 获取已知节点的下一个节点
10.获取父节点
childNode.parentNode:得到已知节点的父节点
原生js追加html代码,原生js动态添加元素相关推荐
- 原生js追加html代码,原生js实现给指定元素的后面追加内容
复制代码 代码如下: var header1 = document.getElementById("header"); var p = document.createElement ...
- nuxt.js的核心代码_Nuxt.js中的通用应用程序代码结构
nuxt.js的核心代码 by Krutie Patel 通过克鲁蒂·帕特尔(Krutie Patel) Nuxt.js中的通用应用程序代码结构 (Universal application code ...
- js html颜色代码,原生js编写的浏览器安全色网页拾色器色盘 生成颜色代码
原生js编写的浏览器安全色网页拾色器 by js.alixixi.com #abc-colorPicker .colorPick-close,#filter-colorPicker .colorPic ...
- js+插件实现代码复制及动态生成二维码扫描、分享到朋友圈QQ空间功能
1.代码复制功能需要插件支持ZeroClipbroad,引入js:jquery.zclip.min.js;ZeroClipboard.js;ZeroClipboard.swf 2.jsp功能代码: & ...
- js视频html代码,html+JS刷图实现视频效果(示例代码)
网页播放视频须要载入播放器,可是通过刷图也能实现视频播放的效果 JS中用到Z-index属性,记录一篇解说Z-index属性的博客的地址: http://www.cnblogs.com/gisdrea ...
- 简单的js网页计算机代码,简易js代码实现计算器操作
JS版计算器 /* 定义一个Calculator类*/ function Calculator(){ this.jisuan=function(num1,num2,oper){ var res=0; ...
- 在线js拼接html代码,关于js拼接html元素?
你的意思是 小明和 888888这样的学号都是从数据中来的?然后要展现到前端页面中 其实有很多方法: 一. 直接全HTML拼接(你可能想到的方法) // 假设 有 name 和 xueID 分别代表名 ...
- ext 日期时间控件js html页面代码,Ext JS框架中日期函数的用法及日期选择控件的实现...
增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象. // @param {Date} date 原日期对象. // @param {String} interval v ...
- js漂浮广告代码(简洁!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org ...
- 二、原生JS实现优酷会员首页动态切换轮播图
内容概览 优酷会员首页 一.效果图(完整效果参见源码) 二.源码 (一)HTML文档(index.html) (二)CSS文档(index.css) (三)JS文档(index.js) 优酷会员首页 ...
最新文章
- 今天收到了学校给出的退学警告
- 摘抄 :methodology 怎么写
- Quick Audience精准营销之后 良品铺子还将借力阿里云数据中台有更多动作
- oracle sga pga mysql_修改Oracle数据库SGA和PGA大小
- 计算机windows无响应,Windows电脑便笺没反应不能用了怎么办?
- PSP自制系统3.xxOE相关内容
- 专科python应届生工资多少-Python最好的就业方向与就业岗位技能要求,能赚多少钱?...
- 在IntelliJ IDEA中clone项目代码
- MATLAB语言初步学习(四)
- python开发接口
- [推荐]网店代销的卖家,你的宝贝名称修改了吗?
- NERO9注册机使用
- 如何提高芝麻信用分?解读芝麻信用是怎么做的
- 嵌入式系统的开发概述(三星s5p6818系统为例)
- 论文写作笔记7 大纲outline写作方法
- IB中文:文学作品中幽默手法的表现方式(下)
- 总结:Spring boot熔断
- EMD经验模态分解实例(转C代码)
- Unity入门03——Unity脚本
- VS2022 MAUI Hello World——Windows平台及Android平台效果
热门文章
- 按ASCII码给json对象排序
- python的unicode编码表_Python-编码
- eoLinker-API_Shop_知识类API调用的代码示例合集:驾考题库、ISBN书号查询、万年历查询等...
- Excel 2010实战技巧精粹
- 泛微oa部署linux步骤,泛微E-Cology协同办公平台安装部署手册.doc
- oracle数据库下载地址
- C语言实现--背包问题 算法(Knapsack Problem)
- GD32VF103开发环境简单介绍
- 8086汇编语言程序设计
- EditPlus3破解版下载以及配置java使用教程