如何在jQuery中创建div元素?
当前回答
我希望这对代码有帮助。:)(我使用)
function generateParameterForm(fieldName, promptText, valueType) {
//<div class="form-group">
//<label for="yyy" class="control-label">XXX</label>
//<input type="text" class="form-control" id="yyy" name="yyy"/>
//</div>
// Add new div tag
var form = $("<div/>").addClass("form-group");
// Add label for prompt text
var label = $("<label/>").attr("for", fieldName).addClass("control-label").text(promptText);
// Add text field
var input = $("<input/>").attr("type", "text").addClass("form-control").addClass(valueType).attr("id", fieldName).attr("name", fieldName);
// lbl and inp => form
$(form).append(label).append(input);
return $(form);
}
其他回答
您可以使用.add()创建一个新的jQuery对象并添加到目标元素中。然后使用链接继续。
例如jQueryApi:
$(“div”).css(“border”,“2px纯红色”).add(“p”).css(“背景”,“黄色”);第二部分{宽度:60px;高度:60px;边距:10px;浮动:左侧;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div></div><div></div><div></div><div></div><div></div><div></div>
div = $("<div>").html("Loading......");
$("body").prepend(div);
创建内存DIV
$("<div/>");
添加单击处理程序、样式等,最后将其插入到DOM中的目标元素选择器中:
$(“<div/>”{//此处的属性text:“单击我”,id:“示例”,“class”:“myDiv”,//('class'在引号中更好)css:{颜色:“红色”,fontSize:“3em”,光标:“指针”},日期:{mouseenter:函数(){console.log(“请…”+$(this).text());},单击:函数(){console.log(“嗨!我的ID是:”+this.ID);}},追加:“<i>!!</i>”,appendTo:“body”//最后,附加到任何选择器}); // << 这里不需要做任何事情,因为我们在内部定义了财产。<script src=“//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
与ian的答案类似,但我找不到适当处理财产对象声明中方法使用的示例,所以就这样。
$("<div/>").appendTo("div#main");
将在<div id=“main”></div>中追加一个空白div
从技术上讲,$(“<div></div>”)将“创建”一个div元素(或者更具体地说是一个div DOM元素),但不会将其添加到HTML文档中。然后,您需要将其与其他答案结合使用,以实际使用它做任何有用的事情(例如使用append()方法等)。
操纵文档为您提供了关于如何添加新元素的各种选项。
推荐文章
- 为时刻添加持续时间(moment.js)
- 这个CSS是如何产生一个圆的?
- 我如何显示点(“…”)在一个跨度与隐藏溢出?
- 如何在JavaScript中获得时区名称?
- 在JSON键名中哪些字符是有效的/无效的?
- jQuery中的live()转换为on()
- 如何区分鼠标的“点击”和“拖动”
- IE9是否支持console.log,它是一个真实的功能吗?
- Node.js同步执行系统命令
- 如何转义JSON字符串包含换行字符使用JavaScript?
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性
- jQuery等价于JavaScript的addEventListener方法
- jQuery需要避免的陷阱
- JavaScript中变量字符串的XML解析
- 用jQuery切换DIV背景图像