js动态创建对象

最新推荐文章于 2021-12-20 10:54:20 发布

做一个快乐的肥宅

最新推荐文章于 2021-12-20 10:54:20 发布

阅读量653

点赞数

分类专栏： script 文章标签： js动态创建input js动态创建a标签 js动态创建form表单

本文链接：https://blog.youkuaiyun.com/qq_35929292/article/details/97934701

版权

script 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用JavaScript动态创建DOM元素，包括input输入框、a链接和form表单。通过DOM操作，可以灵活地在网页中添加、修改和删除元素，实现动态交互效果。

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

========= input ============================================
//一般用于文件上传，但又不想用原生file界面(美化标签后的触发函数)
var fileTips = document.createElement("input");
fileTips.setAttribute("type","file");
fileTips.setAttribute("onchange","getfile(this)");
fileTips.click();

function getfile(obj){
    var formData = new FormData();
    formData.append('file', obj.files[0]);
    $.ajax({
        url: '',
        type: 'POST',
        data: formData,
        dataType: 'JSON',
        cache: false,
        processData: false,
        contentType: false,
        success: function (data) {
            //do
        },
        error: function (data) {
            //do
        }
    });
}

========= a ================================================
var aTips = document.createElement("a");
aTips.setAttribute("href","https://www.baidu.com");
aTips.setAttribute("target","_blank");

========= form =============================================
var params = new Array();
params.push({"name":"admin","value":"123"});
postcall("/xxx", params);

function postcall(url,params){
	var tempForm = document.createElement("form");
	tempForm.action = url;
	tempForm.method = "post";
	tempForm.target = "_blank";
	tempForm.style.display = "none";
	params.forEach(function(item,index){
		var opt = document.createElement("input");
		opt.name = item.name;
		opt.value = item.value;
		tempForm.appendChild(opt);
	});
	document.body.appendChild(tempForm);
	tempForm.submit();
	document.body.removeChild(tempForm);
}