并设置属性方法,JS动态创设元素的两种艺术

作者: 韦德国际1946国际网址  发布:2019-08-19

经过js动态创设标签,并设置属性方法,js动态

当我们在写jsp页面时,往往会遇上这种气象:从后台获取的多少个数不鲜明,此时在前端写jsp页面时也就不鲜明怎么统一希图了。这一年就须要经过js动态创制标签:

1.开立有些标签:如下在body中创设一个div的事例;

<script>
 function fun(){
 var frameDiv = document.createElement("div");//创建一个标签
 var bodyFa = document.getElementById("bodyid");//通过id号获取frameDiv 的父类(也就是上一级的节点)
 bodyFa .appendChild(frameDiv);//把创建的节点frameDiv 添加到父类body 中;
 }
<script>
<body id="bodyid" >
<!--在此添加div标签-->
</body>

2.增多属性:给成立的标签增多相应的质量:

frameDiv .setAttribute("id", "divid");//给创建的div设置id值;
frameDiv .className="divclass"; //给创建的div设置class;
//给某个标签添加显示的值;
var h = document.createElement("h1");
h.innerHTML = data[i].name;
var p = document.createElement("p");
p.innerHTML = "要显示的值";

3.成立的标签加多事件:

a.不带参数:

frameDiv.onmousedown = fun;//ps:函数名fun后面一定不能带括号,否则会在创建标签的时候执行函数, 而不是鼠标按下时执行;

b.有参数:

frameDiv.onmousedown = function(){ fun(this); }

c.要调用的函数;

function fun(){ 
alert("鼠标按下");
}

4.若是牵挂创造的标签未有被掩盖则能够轮换:

 var divFlag = document.getElementById("divFlag");
 var divMain = document.createElement("div");
 if(divFlag != null){
 body.replaceChild(divMain, divFlag);//把原来的替换掉
}
divMain.setAttribute("id", "divFlag");

如上那篇通过js动态创制标签,并安装属性方法正是小编分享给大家的全体内容了,希望能给大家八个参阅,也盼望大家多多帮助帮客之家。

当大家在写jsp页面时,往往会遇上这种场合:从后台获取的数据个数不鲜明,此时在前端写...

当大家在写jsp页面时,往往会凌驾这种情况:从后台获取的多寡个数不明确,此时在前端写jsp页面时也就不鲜明怎么统一筹算了。今年就必要经过js动态创设标签:

动态设置js的性质

并设置属性方法,JS动态创设元素的两种艺术。对象:js的特性名能够利用变量

比喻:js对象object,当赋给该指标属性的时候能够动用以下措施

var object;

object.prop1 = "value1";

object.prop2 = "value2";

也得以使用如下方式:

object.push({prop1:"value1"});

object.push({prop2:"value2"});

在那边prop1 作为质量名称,能够一直用,也足以增多引号,譬喻:

object.push({"prop1":"value1"});

发挥的含义都是同样的,也正是说,prop1只好当做常量被辨认,固然它是个变量也没用,举个例子:

var prop1 = "prop2";

object.push({prop1:"value1"});

与此相类似经过object访谈prop2会冒出哪些景况吧?譬如:

alert(object.prop2) 

不用问,当然是undefined,而访问object.prop1却是"value1"

案由现已说过了,无论加不加引号,属性一律当成常量对待.再举贰个事例:

var arr=[];
arr['js']='jquery';
arr['css']='oocss';
var obj={};
for(var i in arr)
{

    obj.i=arr[i];
}
alert(obj.js);

读者不放猜一下alert会打字与印刷什么?

当然是undefined.

世家再猜一下,假使alert(obj.i)会打字与印刷什么?

自然是oocss,为啥?因为obj今后独有五个属性i,并且经过两次巡回,obj.i前边的被前边的覆盖掉.

倘使有要求,须要动态增加属性,也正是说,属性也必须是八个变量才行,如上例代码,alert(obj.js)不是undefined,而是jquery,该怎么修改呢?

var arr=[];
arr['js']='jquery';
arr['css']='oocss';
var obj={};
for(var i in arr)
{

    obj[i]=arr[i];
}
alert(obj.js);

正是那么粗略!把对象obj当成八个数组来比较,它扶助选用类似于下标方式的格局来把品质和性质值赋给对象.可是,对象依然是指标,obj.length是不设有的.

目的:js的性质名能够采用变量 比方:js对象object,当赋给该对象属性的时候能够使用以下办法 var object; object.prop1 = "value1";...

JS动态创变成分的三种方法,js动态二种办法

正文为大家大快朵颐了js成立成分的两种方法供大家仿效,具体内容如下

1)将必要成立的要素,以字符串的款式拼接;找到父级成分,直接对父级成分的innnerHTML进行赋值。

2)使用Document、Element对象自带的某个函数,来落到实处动态创造成分(创设元素=> 找到父级成分 => 在钦命地点插入成分)

一、字符串拼接方式

    为了更加好的通晓,设定二个选拔场景。

    随机生成一组数字,将那组数据渲染为条形图的款型,放在div[id="container"]中,如下图

      图片 1

 <div id="container">
 </div>
 <script>
  window.onload = function () {
   var str='';
   for(var i=0; i<30 ;i  ){
    var r = parseInt(Math.random()*100); //随机生成一个数字
    str  = '<div>' r '</div>'; //拼接str
   }
   document.getElementById('container').innerHTML=str;
  }
 </script>

 二、使用Document、Element对象自带的一些函数

       也设定三个用到场景,如下图

       获取input中的音讯,依照侧面的按键,分别插入到俗世紫色矩形的侧边或者右侧。

      图片 2

不留余地思路分三步:

1、创造元素:Document.createElement()
2、找到父级成分 :能够透过Id、name、标具名、class、相配钦定的css选拔器
3、在钦点地方插入成分:element.appendChild()、element.insertBefore()       

落实代码:       

<div id="div-input">
 <input type="text" id="txt_input" value="4"/>
 <input type="button" id="leftInsert" value="左侧入" />
 <input type="button" id="rightInsert" value="右侧入" />
</div>
<div id="container">
 1
 2
 3
</div>
 <script>
  window.onload = function () {
   var inputValue= document.getElementById('txt_input').value;
   document.getElementById('leftInsert').onclick=function(){
    //左侧入
    var span = document.createElement('span'); //1、创建元素
    span.innerHTML=inputValue;
    var container = document.getElementById('container'); //2、找到父级元素
    container.insertBefore(span,container.childNodes[0]);//插入到最左边
   }
   document.getElementById('rightInsert').onclick=function(){
    //右侧入
    var span = document.createElement('span'); //1、创建元素
    span.innerHTML=inputValue;
    var container = document.getElementById('container'); //2、找到父级元素
    container.appendChild(span); //3、在末尾中添加元素
   }
  }
 </script>

上述正是本文的全部内容,希望对大家的上学抱有支持。

本文为我们享受了js成立成分的三种方法供大家参照他事他说加以考察,具体内容如下 1)将急需创设的元素,以...

1.创造有个别标签:如下在body中开创叁个div的事例;

<script>
 function fun(){
 var frameDiv = document.createElement("div");//创建一个标签
 var bodyFa = document.getElementById("bodyid");//通过id号获取frameDiv 的父类(也就是上一级的节点)
 bodyFa .appendChild(frameDiv);//把创建的节点frameDiv 添加到父类body 中;
 }
<script>
<body id="bodyid" >
<!--在此添加div标签-->
</body>

2.加多属性:给创立的竹签增添相应的品质:

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:并设置属性方法,JS动态创设元素的两种艺术

关键词: