使用jQuery创建新元素的首选方法

2020/10/12 04:21 · javascript ·  · 0评论

我有2种方法可以创建<div>using jQuery

要么:

var div = $("<div></div>");
$("#box").append(div);

要么:

$("#box").append("<div></div>");

除了可重用性以外,使用第二种方式的缺点是什么?

第一种选择使您更具灵活性:

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

当然.html('*')会覆盖内容,而.append('*')不会覆盖,但是我想这不是您的问题。

另一个好的做法是用前缀您的jQuery变量$
是否有幕后黑手在jQuery的使用$具有可变任何具体原因

"class"属性名称周围加上引号会使它与较不灵活的浏览器更加兼容。

我个人认为,与性能相比,代码的可读性和可编辑性更为重要。无论您发现哪一个更容易看,它都是您出于上述因素选择的一个。您可以将其编写为:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

和您的第一个方法为:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

但是就可读性而言;jQuery方法是我的最爱遵循此有用的jQuery技巧,注释和最佳实践

更富有表现力的方式

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

参考:文档

根据jQuery官方文档

要创建HTML元素,$("<div/>")还是$("<div></div>")首选。

然后你就可以使用appendToappendbeforeafter和等,。将新元素插入DOM。

PS:jQuery版本1.11.x

根据3.4的文档,最好将属性与attr()method一起使用

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

我建议第一个选项,您实际上使用jQuery构建元素。第二种方法只是将元素的innerHTML属性设置为一个字符串,该字符串恰好是HTML,并且更容易出错并且灵活性较低。

如果#box为空,则什么都不做,但是如果不是,则它们执行完全不同的操作。前者将添加div作为的最后一个子节点#box后者完全用#box单个empty div,text和all替换了内容

也可以通过以下方式创建div元素:

var my_div = document.createElement('div');

加班

my_div.classList.add('col-10');

还可以执行append()appendChild()

本文地址:http://javascript.askforanswer.com/shiyongjquerychuangjianxinyuansudeshouxuanfangfa.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!