如何在jQuery中创建div元素?
当前回答
可替换为append()您也可以使用appendTo(),它具有不同的语法:
$("#foo").append("<div>hello world</div>");
$("<div>hello world</div>").appendTo("#foo");
其他回答
$("<div/>").attr('id','new').appendTo('body');
这将在body中创建id为“new”的新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);
}
如果您使用Jquery>1.4,您最好使用Ian的答案。否则,我将使用此方法:
这与celoron的答案非常相似,但我不知道他们为什么使用document.createElement而不是Jquery表示法。
$("body").append(function(){
return $("<div/>").html("I'm a freshly created div. I also contain some Ps!")
.attr("id","myDivId")
.addClass("myDivClass")
.css("border", "solid")
.append($("<p/>").html("I think, therefore I am."))
.append($("<p/>").html("The die is cast."))
});
//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!
$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));
我还认为,在这种情况下,将append()与回调函数一起使用更可读,因为您现在马上就可以看到将要向主体添加的内容。但这是一个品味问题,在编写任何代码或文本时总是如此。
通常,在JQuery代码中使用尽可能少的HTML,因为这大部分是意大利面代码。它容易出错,很难维护,因为HTML字符串很容易包含拼写错误。此外,它将标记语言(HTML)与编程语言(Javascript/Jquery)混合在一起,这通常是一个坏主意。
这个怎么样?这里,pElement指的是您希望该div位于其中的元素(作为!:的子元素)。
$("pElement").append("<div></div");
您可以很容易地在字符串中向该div添加更多内容-属性,内容,您可以命名它。请注意,对于属性值,您需要使用正确的引号。
您可以使用.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的“nonce”属性用于脚本和样式元素的目的是什么?
- React不会加载本地图像
- 我如何在HTML中创建一个泪滴?
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- 使用jQuery获取第二个孩子