原生JS中动态添加元素

效果如图，在点击充值按钮时添加了小的支付窗口

对接渠道时，遇到一个需要在JS中添加iframe的需求

代码如下：

//添加一个div，div中包含一个iframe
window.onload = function () {var div = document.createElement('div');div.id = "zhifu_box";div.className = "zhifu_box";          //添加div的class的时候注意是classNamediv.style.position = "fixed";div.style.right = "0";div.style.bottom = "0";div.style.left = "0";div.style.top = "0";div.style.top = "0";div.style.display = "none";            //隐藏当前divdocument.body.appendChild(div);var iframe = document.createElement('iframe');iframe.id="payurl_mainframe";iframe.style.height = "100%";iframe.style.width = "100%";iframe.style.scrolling = "yes";$('.zhifu_box').append(iframe)      //jQuery在class为zhifu_box的类里添加一个append
}

添加一个隐藏的div，div里面包含一个iframe，在点击事件里添加document.getElementById('zhifu_box').style.display = "block";
实现当点击的时候div出现

原生JS中动态添加元素相关推荐

【第48天】AJAX在原生JS中的使用，处理XML数据以及DBUtils的使用，假删除（标记删除）
1 介绍 1.1 同步和异步 1.1.1 基于AJAX的异步传输与传统同步传输的对比 1.1.2 使用时间线表示同步和异步在过程上的区别 1.2 JS与AJAX的关系 1.3 AJAX用到的技术 1. ...
html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
原生js中如果有多个onload事件解决方案
原生js中如果有多个onload事件解决方案参考文章: (1)原生js中如果有多个onload事件解决方案 (2)https://www.cnblogs.com/happy-8090/p/11830 ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
【温故知新】——原生js中常用的四种循环方式
一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
原生js中attributes属性
原生js中attribute属性 <div id="box" title="盒子" class="big"></div&g ...
js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件
文章目录前言一.场景需求还原二.代码示例 1.引入JQuery库 2.代码示例一:HTML中div标签部分二:HTML中script标签部分三:JS文件部分总结前言本篇文章中讲的是在 ...
原生JS中DOM节点相关API合集
原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Te ...
原生JS中的Ajax
所谓Ajax,就是在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式.而我们常说的原生JS中的Ajax就是围绕XMLHttpRequest对象进行发送请求. 1.XMLHttp ...

原生JS中动态添加元素

原生JS中动态添加元素相关推荐

最新文章

热门文章