相关文章推荐
爱搭讪的烤红薯  ·  windows ...·  1 年前    · 
行走的丝瓜  ·  mysql - ...·  1 年前    · 

知识点:appendChild()方法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。具体的用法可以参考
W3C

1、首先用createElement创建一个div

里面的××必须是一样的。

  var ×× = document.createElement("div"); //创建一个div
2、给div添加样式
 ××.style.cssText = "样式";
3、给div添加class和id
 ××.className = "class名";  //给div添加class名
 ××.id = 'id名';  //给div添加id名
4、使用appendChild() 方法向div的末尾添加新创建的div
 div.appendChild(××); 
5、给div追加一个文本
var text = document.createTextNode("文本内容");  //createTextNode  创建一个文本
 ××.appendChild(text);  //将文本追加到div里面

动态添加的div如何绑定点击事件

addEventListener()方法用于向指定元素添加事件句柄,具体用法可以参考W3C

 ××.addEventListener("click",function(e){
       //动态改变iframe的src属性
       document.getElementsByTagName("iframe")[0].src=s.body.url; 
  });
   var button = document.createElement("div"); //创建一个div
    //给这个div添加样式
   button.style.cssText = "width:100%;margin: 20px 0;padding: 10px 0;border-radius: 50px;font-size: 16px;background: #e4cc78;";
   button.className = "btnclass";  //给div添加class名
   button.id = 'continuePay';  //给div添加id名
   var text1 = document.createTextNode("继续支付");  //创建一个文本
   div.appendChild(button);  //向div的末尾添加新创建的div
   button.appendChild(text1);  //把文本添加到新创建的div的末尾
  //给新创建的div添加点击事件
  //addEventListener() 方法用于向指定元素添加事件句柄
  button.addEventListener("click",function(e){
       console.log("微信链接:"+ s.body.url);
       document.getElementsByTagName("iframe")[0].src=s.body.url; //动态改变iframe的src属性
  });
                    动态添加div知识点:appendChild()方法appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。具体的用法可以参考W3C1、首先用createElement创建一个div里面的××必须是一样的。  var ×× = document.createElement("div"); //创建一个div2、给div添加样式 ××.style.cssText = "样式";3、给div添加class和id ××.className = "class名";  //给
				
js动态添加点击事件或其他事件(这里以点击事件为例) 第一种:加载 js文件时自动添加,这种方法可以免去html元素内的onclick等属性一长串的字符,也方便一些像我这样初级的查看源代码时找不着北; 但缺点是只能在页面启动时加载一次(不知道这样表述准不准确,反正我能懂就好了),想要灵活的添加移除还不方便,案例代码如下: var redmove=document.getElementById("rolemove"); redmove.addEventListener('click',function(){…
今天在写项目时遇到问题,大概就是需要给后端返回一个查询的页数,直接写了个简单分页的方法, 首先使用select下拉菜单传递页数 第一次查询时,将startRow=1传递,会获得总数count,和第一页的信息。 在将count/每一页信息+1获得总页数,通过js动态生成到select上
绑定Html Class 我们可以传给 v-bind:class 一个对象,以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存: <div class=static v-bind:class={></div> data: { isA: true, isB: false} 渲染结果: <div class=static></div> 你也可以直接绑定数据里的一个对象,结果与上面的一致: <div v-bind:class=classObject></
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变;但是往往所有v-for循环出的元素都会变化。如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化 html: {{item.name}} .addclass{ color : red; data:{ items :[ 在模板中使用v-for指令遍历数组,并使用v-bind绑定class和style: <div v-for="(div, index) in divs" :key="index" :class="div.class" :style="div.style"></div> 在方法中使用push方法向数组中添加元素: methods: { addDiv() { this.divs.push({ class: 'new-div', style: { backgroundColor: 'red', width: '100px', height: '100px' 调用addDiv方法即可动态添加div节点。