Javascript 通过JQuery向特定HTML标记添加内容

我想将输入字段和图像标记添加到特定的

这就是我所做的

添加更多图像
//应该放在这里。然而，它总是不合时宜
函数add_字段（）{
var x=document.getElementById（“mainform”）；
//创建要插入的输入字段
var new_field=document.createElement（“输入”）；
var pos=x.childElementCount；
//将输入字段数据类型设置为文本
新建_field.setAttribute（“类型”、“文件”）；
新建_field.setAttribute（“名称”、“文件名[]”）；
新建_field.setAttribute（“接受”、“图像/*”）；
新的_field.setAttribute（“类”，“窗体控件col-2”）；
新建_field.setAttribute（“id”，“img”+pos）
var preview=document.createElement（“img”）；
setAttribute（“src”、“#”）；
preview.setAttribute（“id”，“preview img”+pos）；
preview.setAttribute（“高度”，“250px”）；
preview.setAttribute（“宽度”，“250px”）；
//插入元素
x、 insertBefore（新_字段，x.childNodes[27]）；
x、 insertBefore（预览，x.childNodes[28]）；
$（“form#mainform input[type='file']）。更改（函数（）{
readURL（this）；
});
}
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
imgId='#预览-'+$（输入）.attr（'id'）；
$（imgId.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}

---

我想使输入字段和图像标记在同一行中，但它不起作用。原因来自

x.insertBefore（）

。我不知道应该是什么。请帮助我检查并解决此问题。谢谢大家!

在使用jquery时，可以使用

$（x）.find（'.row'）.prepend（new_字段）

如果要添加到top或

$（x）.find（'.row'）.append（new_字段）如果要添加到底部

我不喜欢将纯javascript与jquery混合使用。。这是代码的jquery版本


.row>div{
利润率：20px；
填充：20px；
背景：#eee；
}

添加更多图像
函数add_字段（）{
变量x=$（“#主要形式”）；
var row_div=$（“#mainform.row”）；
var count=$（“#mainform.row div”）.length；//获取divs计数
//创建要插入的输入字段
var new_field=“”
//预演
var preview=“”；
//插入元素
行分区前置（“”+预览+新字段+“”）；
$（“form#mainform input[type='file']）。更改（函数（）{
readURL（this）；
});
}
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
imgId='#预览-'+$（输入）.attr（'id'）；
$（imgId.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}