原生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", "<p>3</p><p>4</p>"); //添加内容div.insertAdjacentHTML("afterBegin", "<p>3</p><p>4</p>"); div.insertAdjacentHTML("beforeEnd", "<p>3</p><p>4</p>"); div.insertAdjacentHTML("afterEnd", "<p>3</p><p>4</p>"); 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 = "<p>3</p><p>4</p>";div.innerText = "<p>3</p><p>4</p>";//注意这两个效果不一样 这就是 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;}//在点击元素之后添加兄弟元素licurrentTargetDom.insertAdjacentHTML('afterEnd','<li>123<li>')};
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动态添加元素相关推荐
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 在添加完之后,可以使用 $.parser.parse();这个方法进行处理: (1) 对整个页面重新渲染: $.parser ...
- 原生js动态为table追加html,JS动态添加Table的TR,TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: var tempRow=0; var maxRows=0; function insertRows( ...
- js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)
var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...
- 原生JS动态创建html,实现瀑布流布局-
首先在搭起一台服务器(请求数据用),新建文件夹,打开cmd npm init -y 初始化包配置文件 然后下载依赖包npm i mockjs express cors 源代码(服务端server.js ...
- 原生js动态添加class
在点击切换的过程中,我们需要给被选中的子选项添加"active",然后让其它子选项删除"active"名. 该怎么做呢? 首先,通过JS取到所有tab的节点 v ...
- js动态添加元素为何 点击事件无效
本来觉得不用提的,但是发现最近几个朋友在提,而且新来的小兄弟也有点迷糊这个,所以就简单说说, 看看下面的代码: <!DOCTYPE html> <html><head&g ...
- 原生JS动态计算输入框文本内容的宽度,当内容宽度超过输入框的宽度时可控
需求场景:左边输入框输入内容,右边输入框用placeholder展示,当placeholder的内容宽度超过右边输入框的宽度时,placeholder强行替换为"请选择" 注意事项 ...
- 原生js动态实现添加表格数据并某列求和
<table width="600" border="1" cellspacing="0"><thead><t ...
- js动态向页面添加元素
目标代码:<div id="userInfo" class="row cl border-tg"><label class="for ...
- js动态添加,jq,ajax
js动态添加元素. $(document).ready(function(){function Object(){this.key_name="test1";this.text=& ...
最新文章
- Swing编程基础 之四
- mysql group by 报错 ,only_full_group_by 三种解决方案
- 876. 链表的中间结点(C语言)
- Vue+Openlayers+Draw实现画笔切换功能,切换画笔为点、线、面
- Python爬虫入门教程 6-100 蜂鸟网图片爬取之一
- C++(STL):08---vector元素访问
- SpringMVC集成Thymeleaf
- Linux系统的目录结构 及各目录用途详解
- Building Autoencoders in Keras
- java连接DB2数据库
- 如何清理cmake产生的各种文件
- win7安装电子专利CPC客户端以及专利文件的生成过程
- JavaSE,JavaEE,JavaME区别
- Origin绘图快速上手指南
- 用人话说说文明和文化
- choose标签使用
- 销售新人必看书籍推荐
- input不能输入的问题
- lsnrctl 未找到命令
- NLP 实战(10): CSDN 领域榜标签分组更新