原生js添加html

原生js追加Html 或者text

方法:insertAdjacentHTML(postion,html); insertAdjacentTEXT(postion,text); 参数: position 是相对于 element 元素的位置,并且只能是以下的字符串之一: 1. beforeBegin: 插入到标签开始前 2. afterBegin:插入到标签开始标记之后 3. beforeEnd:插入到标签结束标记前 4. afterEnd:插入到标签结束标记后 html 是需要添加的标签节点 text 是文本参考地址:htt

原生js添加和删除类

原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类","替换后的类");

原生JS添加节点方法与jQuery添加节点方法的比较及总结

一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> </div> <div id="div

原生js添加博客点击鼠标出小心心效果~~

昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页加载不进去jquery所以先这么着试试,意料之中没有问题. 毕竟刚开始给自己博客添加JS才疏学浅,有更好的方法添加更炫酷的动态效果可以分享给我呀.有大神给指点指点那就更多谢啦.欢迎指正错误~ 效果如下: 话不多说了,先添加css代码,主要是用来画“小心心”的: body {position: rel

原生JS添加事件方法

事件事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option); EventName: example => click dblclick change blur focus keyperss keydown keyup mouseover mouseout; option 可以是一个对象也可以是Boolean值. Boolean值时, 事件运行方式true为事件冒泡阶段处理事件(自下而上), 不写传参时为默认false

原生JS添加类名删除类名

为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass")

原生js添加类名，删除类名

1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getElementById("myDiv").classList.remove('mystyle'); 3.检查是否含有某个css类: myDiv.classList.contains('myCssClass'); //return true or flase; 注意:类名直接写,不可面“.”; 如

通过原生js添加div和css

function createStyle(){ return"*{padding:0;margin:0;border:0}.loading{width:640px;height:1024px;margin:0 auto}.loadImg{width:640px;height:1024px;animation:fadeInOut 3s linear;-webkit-animation:fadeInOut 3s linear;-moz-animation:fadeInOut 3s linear;op

原生JS 添加或者删除某个class

$S.addHandler($S.getId(fav[i]),'mouseover',function(){ this.className += " "+'S_hover'; }); $S.addHandler($S.getId(fav[i]),'mouseout',function(){ var reg = new RegExp('(\\s|^)'+'S_hover'+'(\\s|

原生js添加鼠标事件的兼容性写法

兼容pc和移动端,还兼容了surface平板. surface平板特别坑,既可以用鼠标也能用触摸屏,也就是说同时有touch事件和mouse事件. function addEvent(_target,eventType,fnHandler,useCapture){ useCapture==undefined?useCapture=true:""; var touchable,isSurface,msPointerable; try{ msPointerable = window.nav

分别使用原生js和jQuery添加/删除元素的class属性

一.原生js添加/删除元素的class属性:  <span class="test"></span> // 获取元素 var ele = document.getElementsByClassName("abc"); // 方法1:直接赋值,会覆盖原有的值 ele.className = "test1"; <!-- clas

JS添加节点方法与JQuery添加节点方法的比较及总结

原生JS添加节点方法与JQuery添加节点方法的比较及总结一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> &

[笔记]原生JS实现的DOM操作笔记

原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasClass,toggleClass:原生js添加删除class 原生js添加删除class 代码如下: var dom = { /** 功能说明:匹配元素是否含有指定class * @param el 指定的DOM元素 * @param className 匹配的class名 * */ hasClas

原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ m

原生js怎么为动态生成的标签添加各种事件

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom对象是找不到的,jq通过事件委托解决了这个问题,但是原生js这个问题该怎么解决呢?我在网上查了很多资料,好像只有一种办法,那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件,如果有更好的方法,欢迎提出来. <!DOCTYPE html> <html lang=&qu

原生JS动态添加和删除类

原生JS动态添加和删除类由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类添加和和删除类有三种方法首先等到一个 dom 对象(也叫dom元素), 通过document.getElement--的几种方法得到如` let element = document.getElementById("box"); 通过类名, 获取类名: el.className, 赋值: el.className =

原生js动态添加style，添加样式

原生js动态添加style,添加样式第一种 var style="[assign-url='"+str+"']{display:initial}"; var ele=document.createElement("style"); ele.innerHTML=style; document.getElementsByTagName('head')[0].appendChild(ele) 第二种,使用中间元素div转化为dom(推荐): var

原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;widt

原生js实现类的添加和删除,以及对数据的add和update、view ，ajax请求，页面离开的操作

1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var allClass = element.className.trim().split(" "); return allClass.indexOf(cla) > -1; } function addClass(cla,element){ if(!hasClass(cla,element)

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

原生js添加html

热门专题