إنشاء عنصر div في مسج [مكررة]

Question

هذا السؤال سبق الجواب هنا:

• مسج الوثيقة.createElement ما يعادل? 13 إجابات

كيف يمكنني إنشاء div عنصر في مسج?

Answer 1

يمكنك استخدام append (لإضافة المركز الأخير للوالد) أو prepend (لإضافة موضع قبضة الوالد):

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

وبدلاً من ذلك، يمكنك استخدام .html() أو .add() كما ذكر في أ إجابة مختلفة.

Answer 2

اعتبارًا من الإصدار jQuery 1.4، يمكنك تمرير السمات إلى عنصر مغلق ذاتيًا كما يلي:

jQuery('<div/>', {
    id: 'some-id',
    "class": 'some-class',
    title: 'now this div has a title!'
}).appendTo('#mySelector');

وهنا هو في المستندات

يمكن العثور على أمثلة على تم إصدار jQuery 1.4:15 ميزة جديدة يجب أن تعرفها .

Answer 3

من الناحية الفنية $('<div></div>') سوف "يخلق" أ div (أو بشكل أكثر تحديدًا عنصر DIV DOM) ولكن لن يتم إضافته إلى مستند HTML الخاص بك.ستحتاج بعد ذلك إلى استخدام ذلك مع الإجابات الأخرى للقيام بأي شيء مفيد به (مثل استخدام append() طريقة أو ما شابه).

ال وثائق التلاعب يمنحك جميع الخيارات المتنوعة حول كيفية إضافة عناصر جديدة.

Answer 4

d = document.createElement('div');
$(d).addClass(classname)
    .html(text)
    .appendTo($("#myDiv")) //main div
.click(function () {
    $(this).remove();
})
    .hide()
    .slideToggle(300)
    .delay(2500)
    .slideToggle(300)
    .queue(function () {
    $(this).remove();
});

Answer 5

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

Answer 6

$("<div/>").appendTo("div#main");

سيتم إلحاق div فارغ بـ <div id="main"></div>

Answer 7

هناك طريقة مختصرة لإنشاء div

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

الآن يمكن إلحاق div المخصص بأي div آخر.

Answer 8

كل هذه عملت بالنسبة لي،

جزء HTML:

<div id="targetDIV" style="border: 1px solid Red">
    This text is surrounded by a DIV tag whose id is "targetDIV".
</div>

كود جافا سكريبت:

//Way 1: appendTo()
<script type="text/javascript">
    $("<div>hello stackoverflow users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>

//Way 2: prependTo()
<script type="text/javascript">
    $("<div>Hello, Stack Overflow users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>

//Way 3: html()
<script type="text/javascript">
    $("#targetDIV").html("<div>Hello, Stack Overflow users</div>"); //.html(): Clean HTML inside and append
</script>

//Way 4: append()
<script type="text/javascript">
    $("#targetDIV").append("<div>Hello, Stack Overflow users</div>"); //Same as appendTo
</script>

Answer 9

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

سيؤدي هذا إلى إنشاء div جديد بالمعرف "new" في النص الأساسي.

Answer 10

document.createElement('div');

Answer 11

إليك تقنية أخرى لإنشاء divs باستخدام jQuery.

استنساخ العنصر

لنفترض أن لديك 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>

Answer 12

إنشاء 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>

_{تشبه إجابة إيان، لكن لم أجد أي مثال يتناول استخدام الأساليب بشكل صحيح داخل إعلان كائن الخصائص لذلك تذهب هناك.}

Answer 13

ببساطة إذا كنت ترغب في إنشاء أي علامة HTML يمكنك أن تجرب هذا على سبيل المثال

var selectBody = $('body');
var div = $('<div>');
var h1  = $('<h1>');
var p   = $('<p>');

إذا كنت ترغب في إضافة أي عنصر على سلخ يمكنك أن تجرب هذا

selectBody.append(div);

Answer 14

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

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

Answer 15

إذا كنت تستخدم Jquery> 1.4، فأنت الأفضل إجابة إيان.وإلا سأستخدم هذه الطريقة:

هذا مشابه جدًا لـ إجابة سيلورون, ، لكني لا أعرف لماذا استخدموها 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() مع وظيفة رد الاتصال تكون في هذه الحالة أكثر قابلية للقراءة، لأنك الآن على الفور سيتم إلحاق شيء ما بالنص.ولكن هذه مسألة ذوق، كما هو الحال دائمًا عند كتابة أي رمز أو نص.

بشكل عام، استخدم أقل قدر ممكن من HTML في كود JQuery، نظرًا لأن هذا في الغالب عبارة عن كود سباغيتي.إنها عرضة للأخطاء ويصعب صيانتها، لأن سلسلة HTML يمكن أن تحتوي بسهولة على أخطاء مطبعية.كما أنه يخلط لغة ترميزية (HTML) مع لغة برمجة (Javascript/Jquery)، وهي عادة فكرة سيئة.

Answer 16

بدلا من ذلك إلى إلحاق() يمكنك أيضا استخدام appendTo() التي لديها مختلفة الجملة:

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

Answer 17

يمكنك إنشاء علامات منفصلة باستخدام .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 فيها.بعد ذلك، أقوم بإنشاء علامة فرعية للقائمة، مع توفير بعض السمات.لقد قمت بتعيين القيمة لمتغير، بحيث يكون من السهل بالنسبة لي لإلحاقه.

Answer 18

أعتقد أن هذه هي أفضل طريقة لإضافة div:

لإلحاق div اختباري بعنصر div بالمعرف div_id:

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

الآن إلحاق لغة البرمجة إلى هذا الاختبار المضاف div:

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

Answer 19

إذا كان مجرد div فارغًا، فهذا يكفي:

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

أو

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

يعطي نفس النتيجة.

Answer 20

آمل أن يساعد هذا الكود.:) (أنا أستعمل)

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);
}

Answer 21

$(HTMLelement) يمكن أن ينجح ذلك.إذا كنت تريد epmty div فاستخدمه كـ $('<div></div>');.كما يمكنك ضبط العناصر الأخرى بنفس الطريقة.إذا كنت تريد تغيير HTML الداخلي بعد إنشائه، يمكنك استخدامه html() طريقة.للحصول على ExternalHTML كسلسلة يمكنك استخدامها كما يلي:

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;

Answer 22

يمكنك استخدام .add() لإنشاء جديد مسج هدف وإضافتها إلى العنصر المستهدف.استخدم التسلسل ثم للمضي قدمًا.

على سبيل المثال 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>

Answer 23

وماذا عن هذا؟هنا، pElement يشير إلى العنصر الذي تريده div داخل (أن يكون طفلا!:).

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

يمكنك بسهولة إضافة أي شيء أكثر إلى ذلك div في السلسلة - السمات، المحتوى، سمها ما شئت.لاحظ أنه بالنسبة لقيم السمات، تحتاج إلى استخدام علامات الاقتباس الصحيحة.

Answer 24

لقد صنعت للتو صغيرة البرنامج المساعد مسج من أجل هذا.

يتبع بناء الجملة الخاص بك:

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

DOM يمكن تحديد معرف العقدة كمعلمة ثانية:

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

هل الأمر جدي؟لا.ولكن بناء الجملة هذا أفضل من $("<div></div>"), ، وهي قيمة جيدة جدًا مقابل هذا المال.

(الإجابة منسوخة جزئيًا من: مسج document.createElement يعادل؟)