javascript - js设置id - js设置title




在jQuery中创建div元素 (18)

$(HTMLelement)可以成功。 如果你想epmty div使用它作为$('<div></div>'); 。 你也可以用同样的方法设置其他元素。 如果您想在创建后更改内部HTML,则可以使用html()方法。 要获得outerHTML作为字符串,你可以使用如下所示:

var element = $('<div/>');
var innerHTML = element.html(); // if you want set new HTML use it like this element.html('<b>new HTML</b>');
var outerHTML = element[0].outerHTML;

这个问题在这里已经有了答案:

如何在jQuery中创建div元素?


如果你正在使用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()和回调函数在这种情况下更具可读性,因为您现在立即append()某些内容添加到主体中。 但是,这是一个有趣的问题,就像往常在编写任何代码或文本时一样。

一般来说,在JQuery代码中使用尽可能少的HTML,因为这主要是意大利式面条代码。 这很容易出错并且很难维护,因为HTML-String可以很容易地包含拼写错误。 另外,它将标记语言(HTML)与编程语言(Javascript / Jquery)混合在一起,这通常是一个糟糕的主意。


你可以使用.add()创建一个新的jQuery 对象并添加到目标元素。 然后使用链接继续进行。

例如jQueryApi

$( "div" ).css( "border", "2px solid red" )
  .add( "p" )
  .css( "background", "yellow" );
 div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
  }
<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>


你可以使用append (添加到父级的最后位置)或prepend (添加到父级的第一个位置):

$('#parent').append('<div>hello</div>');    
// or
$('<div>hello</div>').appendTo('#parent');

或者,您可以使用不同答案中提到的.html().add()


创建div的简短方法是

var customDiv = $("<div/>");

现在,可以将自定义div附加到任何其他div。


创建一个内存中的DIV

$("<div/>");

添加点击处理程序,样式等 - 最后插入DOM到目标元素选择器中:

$("<div/>", {

  // PROPERTIES HERE
  
  text: "Click me",
  id: "example",
  "class": "myDiv",      // ('class' is still better in quotes)
  css: {           
    color: "red",
    fontSize: "3em",
    cursor: "pointer"
  },
  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },
  append: "<i>!!</i>",
  appendTo: "body"      // Finally, append to any selector
  
}); // << no need to do anything here as we defined the properties internally.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

与ian的回答类似,但我没有找到任何正确解决属性对象声明中方法的使用的例子,所以你去了。


您可以使用.jquery()方法创建单独的标签。 并使用.append()方法创建子标签。 由于jQuery支持链接,您还可以通过两种方式应用CSS。 可以在类中指定它,或者只需调用.attr()

var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);

var aHref = jQuery('<a/>',{         
}).appendTo(lTag).attr("href", data.mediumImageURL);

jQuery('<img/>',{                                               
}).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);

首先,我将一个列表标签附加到我的div标签并将JSON数据插入到它中。 接下来,我创建一个列表的子标记,提供了一些属性。 我将这个值赋给了一个变量,这样我就很容易追加它。


我刚刚为此制作了一个小型jQuery插件

它遵循你的语法:

var myDiv = $.create("div");

DOM节点ID可以被指定为第二个参数:

var secondItem = $.create("div","item2");

这是严重的吗? 但是,这个语法比$(“<div> </ div>”)更好,对于这些钱来说这是一个很好的价值。

(部分复制回答: jQuery document.createElement等效?


我认为这是添加div的最佳方式:

要将测试div附加到ID为div_id的div元素,请执行以下操作:

$("#div_id").append("div name along with id will come here, for example, test");

现在将HTML添加到此添加的测试div中:

$("#test").append("Your HTML");

或者使用append(),你也可以使用appendTo() ,它具有不同的语法:

$("#foo").append("<div>hello world</div>");
$("<div>hello world</div>").appendTo("#foo");    

技术上, $('<div></div>')将'创建'一个div元素(或者更具体地说是一个DIV DOM元素),但不会将其添加到HTML文档中。 然后,您需要将其与其他答案结合使用,以实际执行任何有用的操作(例如使用append()方法等)。

操作文档为您提供了有关如何添加新元素的各种选项。



这个怎么样? 这里, pElement指的是你想要这个div的元素(作为!:)的孩​​子。

$("pElement").append("<div></div");

您可以轻松地将任何更多内容添加到字符串 - 属性,内容中的那个div ,您可以将其命名。 请注意,对于属性值,您需要使用正确的引号。


这是另一种用jQuery创建div的技巧。

元素克隆

假设你的页面中有一个div想要使用jQuery进行克隆(例如,在表单中多次复制一个输入)。 你会这样做,如下所示。

$('#clone_button').click(function() {
  $('#clone_wrapper div:first')
  .clone()
  .append('clone')
  .appendTo($('#clone_wrapper'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clone_wrapper">
  <div>
    Div
  </div>
</div>

<button id="clone_button">Clone me!</button>


$("<div/>").attr('id','new').appendTo('body');    

这将创建新的ID为“新”的身体。


<div id="foo"></div>

$('#foo').html('<div></div>');

div = $("<div>").html("Loading......");
$("body").prepend(div);    

document.createElement('div');






jquery-append