`

jquery动态添加div

阅读更多
var creatediv = function(){
    var parentdiv=$('<div></div>');        //创建一个父div
    parentdiv.attr('id','parent');         //给父div设置id
    parentdiv.addClass('parentdiv');       //添加css样式
    var childdiv=$('<div></div>');         //创建一个子div
    childdiv.attr('id','child');           //给子div设置id
    childdiv.addClass('childdiv');         //添加css样式
    childdiv.appendTo(parentdiv);          //将子div添加到父div中
    parentdiv.appendTo('body');            //将父div添加到body中
};

在div下动态添加img
var bb="http://localhost:8080/VMSInfoDiffusion/";
var server=$("#serverUrl").val();//  访问的地址  
var sourcePath=$("#largePath").val(); //  图片的路径a.jsp例如a.jsp,b.jsp,c.jsp  
var path1="path1";// div的id  
getImage(sourcePath,path1,server);  
function getImage(sourcePath1,path2,server){  
    if(sourcePath1!=null){  
	    var str= new Array();     
	    var str=sourcePath1.split(",");  
	    if(str.length>0){//获得div  
		    var ul = document.getElementById(path2);  
		    for(var i=0;i<str.length;i++){
				var li = document.createElement("li");  
				var img = document.createElement("img");  
				img.setAttribute("id", "newImg");  
				img.src = server+"/"+str[i];  
				li.appendChild(img);
				ul.appendChild(li);  
		    }  
	    }  
    }
}
分享到:
评论

相关推荐

    jquery 拖拽动态添加div 保存拖拽后的效果

    本篇文章将聚焦于一个特定的应用场景:使用jQuery实现拖拽功能来动态添加div,并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先,我们需要理解jQuery UI中的Draggable...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...

    jQuery动态添加删除分组插件

    本文将详细探讨"jQuery动态添加删除分组插件",以及如何结合用户分组和Bootstrap框架来实现高效且用户友好的界面。 首先,我们需要理解jQuery动态添加删除分组插件的核心功能。这个插件主要用于创建可动态增删的...

    jQuery动态添加节点循环流程图表代码.zip

    本资源“jQuery动态添加节点循环流程图表代码”提供了利用jQuery实现动态添加节点并创建循环流程图表的方法。这样的功能在数据可视化、交互式用户界面以及流程展示等方面非常实用。 首先,我们要理解jQuery动态添加...

    jquery 动态添加控件

    本篇文章将深入探讨如何使用jQuery动态添加控件,包括元素的创建、插入和绑定事件,以及在实际项目中的应用。 首先,我们来了解jQuery如何创建新的HTML元素。在JavaScript中,创建元素通常是通过`document....

    jquery动态添加tab内嵌ifream插件

    本篇文章将详细讲解如何利用jQuery实现动态添加Tab并内嵌iFrame插件,以及相关的核心知识点。 首先,我们需要理解Tab组件的基本原理。Tab组件通常用于在有限的空间内展示多个独立但相关的页面内容。用户可以通过...

    jQuery实现动态添加、删除按钮及input输入框的方法

    通过本篇文章,我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法,同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先,我们需要注意的是,当页面加载完毕后,jQuery的$(document)....

    jquery 添加删除 DIV 和 jquery 切换特效

    本文将深入探讨如何使用 jQuery 实现添加、删除 `DIV` 元素以及创建切换特效。 首先,让我们理解 `DIV` 元素在网页布局中的角色。`DIV` 是一个无意义的块级元素,常用来组织页面结构,通过 CSS 样式进行布局控制。...

    Jquery Sortable实现div拖动排序效果

    本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先,你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种...

    Jquery弹出DIV

    **jQuery弹出DIV详解** 在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果。"Jquery弹出DIV"是指利用jQuery来实现一个可交互的模态对话框(通常称为弹出窗口或浮层)...

    jQuery ui drag插件实现浮动div拖动排列布局代码

    本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div,并将其应用于布局排列,以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展,它提供了...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    在网页开发中,jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`...

    Jquery动态替换div内容及动态展示的方法

    本文主要介绍了利用Jquery实现div内容动态替换及动态展示的方法,同时涵盖了使用技巧和注意事项。 首先,我们遇到的问题是在项目中需要将后台拼接的HTML内容通过前台的ajax请求展示到div中。在尝试使用Jquery的....

    jQuery拖动div元素标签

    本教程将深入探讨如何利用jQuery UI库中的Draggable功能来实现div元素的拖动,以及如何通过append方法动态添加元素。首先,我们需要了解jQuery UI库的基本用法。 **jQuery UI Draggable组件** jQuery UI的Draggable...

    jquery 弹出 div 模式窗口

    在这个场景中,我们关注的是如何使用jQuery结合magnific-popup插件来实现一个弹出Div模式窗口的功能。 `jquery.magnific-popup.js`是magnific popup插件的核心脚本,它提供了一种优雅的方式来创建各种类型的弹出...

    用jQuery向div中添加Html文本内容的简单实现

    下面小编就为大家带来一篇用jQuery向div中添加Html文本内容的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    JQuery-DIV弹窗

    在网页设计中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和动画...通过研究这些文件,你可以更深入地理解如何使用jQuery来创建动态、交互式的网页元素。

    jquery div拖动排序效果代码.zip

    本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...

    jQuery鼠标上下拖动div排序代码

    通过以上步骤,我们就成功实现了jQuery鼠标上下拖动div排序的功能,同时也添加了按钮操作的提示效果。这个例子展示了jQuery在增强网页交互性方面的强大能力,结合其他库,我们可以创建更加丰富和灵活的用户界面。在...

    jQuery动态添加table

    本文将围绕“jQuery动态添加table”这一主题进行深入探讨,结合给出的资源,我们可以学习如何利用jQuery高效地在网页上动态创建和操作表格。 首先,我们来看“jQuery动态添加table”的基本概念。在网页设计中,...

Global site tag (gtag.js) - Google Analytics