jquery动态添加div

最新推荐文章于 2022-08-02 08:07:29 发布

dalong3333

最新推荐文章于 2022-08-02 08:07:29 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

文章标签： JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/dalong3333/article/details/84754865

本文详细介绍了如何在网页中动态创建和添加div元素，并通过服务器端处理来实现动态加载图片的功能。重点包括了创建div、设置ID和CSS样式，以及将动态创建的div和图片插入到页面上的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);  
		    }  
	    }  
    }
}