javascript - jquery' title




在jQuery中創建div元素 (18)

這個問題在這裡已經有了答案:

如何在jQuery中創建div元素?


$(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> 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)混合在一起,這通常是一個糟糕的主意。


你可以使用append (添加到父級的最後位置)或prepend (添加到父級的第一個位置):

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

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


使用:

$("#parentDiv").append("<div id='childDiv'>new div to be produced</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的回答類似,但我沒有找到任何正確解決屬性對象聲明中方法的使用的例子,所以你去了。


如果它只是一個空格,這就足夠了:

$("#foo").append("<div>")

要么

$("#foo").append("<div/>")

它給出了相同的結果。


您可以使用.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