精华内容
参与话题
问答
  • JS动态添加div,然后在div中添加元素

    万次阅读 热门讨论 2016-04-09 14:57:25
    需求:  组织部中有个这样的需求,根据年份动态... 先是放一个空的div,让后根据指标的数据,动态的往div添加元素。 代码:  空的div,存放定性指标 动态往div添加元素: for (var n = 0; n ; n++) {

    需求:

       组织部中有个这样的需求,根据年份动态显示该年份下的定性指标!

     


    我的做法:

            先是放一个空的div,让后根据指标的数据,动态的往div中添加元素。

    代码:

     空的div,存放定性指标

    <div id="DvelopmentTarget">     </div>

    动态往div中添加元素:

    for (var n = 0; n < data.length; n++)
            {
               //获取div
                var div = document.getElementById("DvelopmentTarget");
    
                //换行
                var br = document.createElement("br");
                div.appendChild(br);
    
                //添加label ,存放指标名称
                var div2 = document.createElement("label");
                div2.innerText = data[n].QualitativeTargetName;
                div.appendChild(div2);
    
                //添加text ,存放指标权重
                var input = document.createElement("input");
                input.setAttribute('type', 'text');   
                input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型
                input.value = data[n].DevelopmentAllWeight
                div.appendChild(input);
                
                //添加select 存放指标id
                var targetID = document.createElement("select");
                targetID.innerText = data[n].QualitativeTargetID;
                targetID.setAttribute('hidden', 'hidden');
                div.appendChild(targetID);
                //添加 %(单位百分比)
    
                //换行
                var br = document.createElement("br");
                div.appendChild(br); 
            }
    

    用到的知识点:

        创建子节点、  父元素动态添加子元素:

    div2.innerText = data[n].QualitativeTargetName;
    div.appendChild(div2);
    
    
    
    

    设置元素属性:

    input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型

    
    
    
    

    清楚div下的所有元素:

    div.innerHTML = "";

    
    
    
    

    来张大图,再次总结下DOM(文档对象模型)



    总结:学习是个不断反复的过程!


    展开全文
  • 利用鼠标点击事件生成新的元素,适用于动态添加表单等。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)<...div id="div1" oncli...

    利用鼠标点击事件生成新的元素,适用于动态添加表单等。如果点击事件失效,将<div id="div1" onclick="fun1()" style="border:1px solid #ebebeb">中onclick的第一个字母小写

    <!DOCTYPE html>
    <html>
    <head>
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>

    <div id="div1" onclick="fun1()" style="border:1px solid #ebebeb">
    <p id="p1">点击添加新的元素。</p>
    <p id="p2">利用JS向页面动态添加元素</p>
    </div>
     
    <script>
        function fun1(){
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的p标签。");
        para.appendChild(node);
     
    var element = document.getElementById("div1");
    element.appendChild(para);
        }
    </script>

    </body>
    </html>

    展开全文
  • Vue动态添加删除div

    千次阅读 2019-09-18 11:37:18
    效果图 完整源码 <...div class="boxShadow"> <div> <el-button style="width:90px; font-size: 12px">全部扫描</el-button> <el-button style="width:90px; fo...

    效果图

    完整源码

    <template>
    
    <div class="boxShadow">
        <div>
          <el-button style="width:90px; font-size: 12px">全部扫描</el-button>
          <el-button style="width:90px; font-size: 12px">全部清除</el-button>
        </div>
        <div>
    
        <div style="margin-top: 15px;" v-for="(item, pos) in divList">
          <el-input placeholder="请输入仓库地址,如有分支则空格隔开加分支名称,默认不加检测master分支。" v-model="item.gitUrl" class="input-with-select">
            
            <!-- 编码规则 -->
            <template>
              <el-select v-model="item.codeType" slot="prepend" placeholder="请选择编码规则" style="width: 150px">
                <el-option
                  v-for="opItem in options"
                  :key="opItem.value"
                  :label="opItem.label"
                  :value="opItem.value">
                </el-option>
              </el-select>
            </template>
    
            <!-- 删除 -->
            <el-button slot="append" @click="deleteNode(pos)">删除</el-button>
          </el-input>
        </div>
    
        <div style="width: 100%; text-align:center; margin-top: 15px; margin-bottom: 15px">
          <!-- 增加 -->
          <el-button icon="el-icon-plus" @click="addNode()"></el-button>
        </div>
    
        <el-table
          :data="data"
          :header-cell-style="tableHeaderColor"
          ref='multipleTable'
          border
          stripe
          style="width: 100%; margin-top: 20px; font-size: 10px">
    
            <el-table-column
              align="center"
              prop="projectName"
              label="仓库名"
              width="200">
              <template slot-scope="scope">
                <div class="tv-branch"> {{ scope.row.projectName }}</div>
              </template>
            </el-table-column>
    
            <el-table-column
              class="tv-branch"
              align="center"
              prop="jiraId"
              label="分支名">
              <template slot-scope="scope">
                <div class="tv-branch"> {{ scope.row.jiraId }}</div>
              </template>
            </el-table-column>
    
            <el-table-column label="文件数" min-width="130px" align="center">
              <template slot-scope="scope">
                <div v-for="item in scope.row.appVos" class="tv-branch"> {{ item.appName }}</div>
              </template>
            </el-table-column>
    
            <el-table-column label="不规范项" min-width="130px" align="center">
              <template slot-scope="scope">
                <div v-for="item in scope.row.appVos" class="tv-branch"> {{ item.branchName }}</div>
              </template>
            </el-table-column>
    
            <el-table-column label="SonarQube地址" min-width="130px" align="center">
              <template slot-scope="scope">
                <div v-for="item in scope.row.appVos" class="tv-branch"> {{ item.branchName }}</div>
              </template>
            </el-table-column>
    
            <el-table-column
              class="tv-branch"
              align="center"
              prop="updatedTime"
              label="扫描时间">
              <template slot-scope="scope">
                <div class="tv-branch"> {{ scope.row.updatedTime }}</div>
              </template>
            </el-table-column>
    
        </el-table>
      </div>
      </div>
    
    </template> 
    <script type='text/javascript'>
    
      export default {
        name: 'xxx',
    
        methods: {
    
          // 修改table header的背景色
          tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
              return 'background-color: #f0f9eb'
              // return 'background-color: #f0f9eb; color: #fff; font-weight: 500;'
            }
          },
    
    
          //添加标本div
          addNode() {
            this.divList.push({"codeType": "", "gitUrl": ""});
          },
          //删除样本div
          deleteNode(i) {
            this.divList.splice(i, 1);  //删除index为i,位置的数组元素
          },
    
        },
    
        
        data() {
          return {
            data: [],
    
            options: [{
              value: '选项1',
              label: 'Java'
            }, {
              value: '选项2',
              label: 'C#'
            }, {
              value: '选项3',
              label: 'iOS'
            }, {
              value: '选项4',
              label: 'Js'
            }, {
              value: '选项5',
              label: 'Python'
            }],
    
            divList: [
              {"codeType": "", "gitUrl": ""}
            ],
          
          }
          
        },
    
      }
    
    
    </script>
    
    <style lang="less" scoped>
      .clean{
          clear:both;
      }
    
      .tv-branch{
        // display: table-cell;
        vertical-align: middle;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
      .el-select .el-input {
        width: 130px;
      }
      .input-with-select .el-input-group__prepend {
        background-color: #fff;
      }
    </style>
    复制代码

    小结 vue实现动态加载div,主要利用vue中的v-for指令,由于与数据源双向绑定的特性,可以通过修改数据源从而动态加载或删除div。

     

    展开全文
  • js动态添加div

    千次阅读 2018-12-08 17:11:34
    一:添加div样式 .popDivTypeContent { width: 450px; height: 260px; background-color: #e3e4e9; display: block; position: absolute; margin: -100px 200px 200px 200px; z-index: 1; padding-left: ...

    一:添加div样式

    .popDivTypeContent {
    	width: 450px;
    	height: 260px;
    	background-color: #e3e4e9;
    	display: block;
    	position: absolute;
    	margin: -100px 200px 200px 200px;
    	z-index: 1;
    	padding-left: 20px;
    }

    div的样式一般放到css文件中,或者定义在header中。这样样式才能正常显示。

    二:创建div和添加删除

            //动态生成div弹框容器
            let cont = document.createElement('div');
            cont.setAttribute('id','popDivArticle')
            cont.setAttribute('class','popDivTypeContentArticle');
            let scrollTop = $(document).scrollTop();
            cont.style.marginTop = scrollTop + "px"//动态修改css样式属性
            let shutupLink = document.createElement('a');
            shutupLink.setAttribute('onclick','document.getElementById("popDivArticle").parentNode.removeChild(document.getElementById("popDivArticle"))')//删除div
            shutupLink.text = "关闭"
            cont.appendChild(shutupLink)
            cont.appendChild(document.createElement('br'))
             //提交按钮
            let submitButton = document.createElement('input');
            submitButton.setAttribute('type','button');
            submitButton.setAttribute('value','提交')
            document.getElement('parenDiv').appendChild(cont)//添加div

    上面就是基本操作,当然有事div中的dom操作比较麻烦,这边附一张dom操作图。注意在创建出来的div中,我们就已经获取到了div的这个node值,后面的所有操作,属性的替换和操作的设置都把它当做一个普通的dom节点来操作即可。

    四:div随屏幕滚动

    <div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv">
    
    </div>
    <div class="div1">层1</div>
    <div class="div2">层2</div>
    
    <style type="text/css">
    	.div1 {
    		background-color: #FF0000;
    		width: 2000px;
    		height: 2000px;
    	}
    	
    	.div2 {
    		background-color: #33FF66;
    		width: 100px;
    		height: 100px;
    		position: fixed;
    		left: 50px;
    		top: 50px;
    	}
    </style>
    
    <script>

    (1)对文档、屏幕、层的一些jquery基本操作

    var showAdminUser = function (obj) {
            var offSet = $(obj).offset();
            var docTop = offSet.top;    //当前元素相对文档top偏移位置
            var docLeft = offSet.left;  //当前元素相对文档left偏移位置
    
            var docWidth = $(document).width(); //整个页面文档的宽度
            var docHeight = $(document).height();   //整个页面文档的高度
            var dScrollTop = $(document).scrollTop(); //整个文档滚动条相对top位置
            var wScrollTop = $(window).scrollTop(); //整个屏幕滚动条相对top位置
            var winWidth = $(window).width(); //整个屏幕宽度
            var winHeight = $(window).height();//整个屏幕高度
    
            alert("docWidth: " + docWidth + "——" + "docHeight:" + docHeight + " dScrollTop:" + dScrollTop);
    
            var dWidth = document.body.offsetWidth;  //纯javascript整个页面文档的宽度
            var hHeight = document.body.offsetHeight;   //纯javascript整个页面文档的高度
            var scrollTop = document.body.scrollTop + document.documentElement.scrollTop
            alert(" docWidth: " + dWidth + " docHeight: " + hHeight + " : " + scrollTop);
    
        }

    (2)层伴随滚动条

    $(document).ready(function() {       
    	$(window).scroll(function() {           
    		var scrollTop = $(document).scrollTop(); //htm文档滚动对象距离顶部位置
    		//alert(scrollTop);
    		           
    		var AdminUserStateDiv = $("#AdminUserStateDiv");           
    		//AdminUserStateDiv.css("top", scrollTop + "px");
    		           
    		AdminUserStateDiv.animate({
    			"top": scrollTop + "px"
    		}, 0);  //层伴随滚动条滚动,时时改变层对顶部的距离
    		//$("#scrollUl").animate({ "marginLeft": scrollposition + "px" }, 10); 
    	})
    });

    (3)遮罩层和加载图片效果

    <div id="CommonAlertMessageBackg" style="display: none; height: 100%; left: 0; margin: 0; opacity: 0.7; position:absolute; top: 0; visibility: visible; width: 100%; z-index: 998; "> </div>  //解释:position:absolute;是固定在屏幕上;position:fixed;是系在屏幕上,跟随着滚动条移动的;
    <div id="loadding" style="display: none; position: absolute; z-index: 999;">
       <img src="@Url.Content("~/Content/img/loading3.gif")" alt="加载中......" />
    </div>
    
     
    
    <script type="text/javascript">
        var ShowLoadding = function () {
            var width = $(window).width();
            var height = $(window).height();
            $("#loadding").css("left", width / 2);
            $("#loadding").css("top", height / 2);
            $("#loadding").show();
    
            var top = $("#ListContent").offset().top;
            var left = $("#ListContent").offset().left;
            var width = $("#ListContent").width();
            var height = $("#ListContent").height();
            $("#CommonAlertMessageBackg").css({ "top": top, "left": left, "width": width, "height": height });
    
            $("#CommonAlertMessageBackg").show();
        };
        var HideLoadding = function () {
            $("#loadding").hide();
            $("#CommonAlertMessageBackg").hide();
        };
    </script>

     

     

     

     

     

    展开全文
  • jquery 动态添加div元素(两种方式)

    万次阅读 2016-05-17 17:07:21
    方法一:var creatediv= function(){ var parentdiv=$('<div></div>'); //创建一个父div parentdiv.attr('id','parent'); //给父div设置id parentdiv.addclass('parentdiv'); //添加css样式 var chil
  • vue中动态添加div

    千次阅读 2019-01-19 18:12:00
    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: 核心代码说明(样式...
  • 页面中添加DIV

    2018-02-02 15:37:45
     var ihtml = "<font color='red'>提箱注意事项:</font><br>"; ihtml+="<textarea name='sztakeNotice' id='sztakeNotice' rows=6 cols=45>"+$("model.sztakeNotice").value+"<...
  • javascript动态添加div

    千次阅读 热门讨论 2014-03-28 20:46:11
    网上有很多的实现js动态添加div的方法,在这里我展示一种使用insertBefore(),和innerHTML方式。 前台代码 js动态添加div 获得question下的所有divv 动态添加div ...
  • Javascript——动态添加div的两种方法

    千次阅读 2018-10-11 12:02:15
    1.使用js添加。  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &...
  • jquery动态添加Div

    万次阅读 2011-10-21 21:04:27
    实现效果:动态添加一行控件 html页面中的代码 Filter Add Reset jqury代码 $("#filter").
  • Js动态添加div实现模块复制

    千次阅读 2016-10-08 19:52:47
    **原DIV效果图↓** 点击“保养项目+”后效果图如下(红色线框中就是动态添加出来的)↓接下来看代码↓html 代码块↓<div id="father"> <div class="row"> <div class="col-md-2" style="font-size: 15p
  • js动态添加div(一)

    千次阅读 2010-08-13 11:16:00
    在一个Div前添加Div
  • vue 动态添加div

    千次阅读 2020-03-18 14:11:17
    div v-for="(item,index) in editSchProps" :key="index" > <el-form-item :label="item.code+'编码'" prop="code" :rules="userRules"> <el-input v-model="item.code" :maxlength="10...
  • 动态添加diV,实现了拖拽功能

    千次阅读 2012-05-21 14:52:12
    New Document function creatediv() { ... var obj = document.createElement("div"); classA.call(obj); bd.appendChild(obj); } function classA(){ this.style.width=
  • JQuery的append动态添加div

    千次阅读 2017-03-23 15:56:12
    在前台使用JS操作一些属性的时候,有些需求需要动态的创建div,这里可以用到JQuery的append()方法,其他方法暂时没有学到,等接触到再积累。  结合Easyui框架来实现一个小的例子,动态的创建一个dialog弹出框,也...
  • vue+element项目动态添加删除数据div 效果如下: 1、初始状态 2、点击添加两条数据 3、删除第一条数据 代码如下: <el-form-item> <p>任务内容:</p> <el-button type="primary" v-on:...
  • JavaScript动态添加div

    千次阅读 2018-06-12 14:09:42
    在js中动态添加div层 //创建一个div var div = document.createElement("div"); div.id = "viewPointDiv"; //为div创建属性class = "viewPoint" var divattr = document....
  • 1、动态添加div 1 function cDiv(num){ 2 var oDiv=document.createElement("div"); 3 oDiv.className='divstyle'; 4 oDiv.id=num; 5 oDiv.innerHTML=num; 6 document.body.appendChild(oDiv); 7 documen...
  • 页面中先建好一个Panel 名称为pnlMain,可以写在Page_Load事件或者Page_Init事件 protected void Page_Load(object sender, EventArgs e) { Finally final = BllFinally.GetByWhereADO(t =>...
  • var Odiv=document.createElement("div"); Odiv.style.cssText="width:200px;height:200px;background:#636363;text-align:center;";  var dinput=document.createElement("input"); dinput.type = "button" ...
  • 项目需求:在地图上根据指定经纬度添加div 完整代码如下: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&...
  • css添加div阴影

    2019-11-05 13:50:03
    box-shadow:0 0 20px rgba(0, 0, 0, 0.3);
  • vue 通过按钮点击动态添加组件

    万次阅读 2019-05-14 08:28:14
    Vue.component('dom', { template: '<div>我是一个组件</div>' }) 第二步、在页面上用v-for循环遍历一个空的数组 第三步、在这个里面放一个定义的组件 <div v-for="(d,index)...
  • 点击按钮动态添加DIV,id和class都相同,切换class的时候所有DIV的class都会变,想要只切换选中的那个DIV,要智能化一点的方法,可以扩展到10个20个
  • 下面有个创建按钮,效果就是,点击一下按钮,下面创建出一个跟宽高参数对应的div盒子,并且可以自由移动,完了下面有个保存按钮,点击保存之后,刚刚新建的这个div要保存在数据库。请问各位大神,这种技术是如何实现...
  • 需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口。但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能。 | 实现 | html 前端是基于bootstrap4.0. &amp;amp;lt;form...
  • 有个svg地图打印模板,想利用js往模板中添加div,Div主要是添加的地图,不知道能否实现,
  • vue 中,添加html元素,并在元素中添加点击事件,用原生的onclick来触发事件,将事件挂在window上 1.拼接一段html let conten=`<button οnclick="come()">点我</button>`; mouseClickHandler(f) { ...
  • <div class="main" > <el-table :data="details" style="width:100%;"> <el-table-column v-if="false" prop="id" ...

空空如也

1 2 3 4 5 ... 20
收藏数 488,595
精华内容 195,438
关键字:

添加div