javascript - معنى - jquery prepend




إنشاء عنصر div في jQuery (18)

هذا السؤال لديه بالفعل إجابة هنا:

كيف أقوم بإنشاء عنصر div في jQuery ؟


آمل أن يساعد التعليمات البرمجية. :) (أنا أستعمل)

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

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

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

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

الآن أضف HTML إلى اختبار div الإضافي هذا:

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

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

على غرار إجابة إيان ، لكنني لم أجد مثالاً يعالج بشكل صحيح استخدام الطرق ضمن تعريف كائن الخصائص حتى تذهب.


استعمال:

$("#parentDiv").append("<div id='childDiv'>new div to be produced</div>");

أعتقد أنها سوف تساعد.



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

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

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

جزء HTML:

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

كود JavaScript:

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

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

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

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

لقد قمت للتو بعمل ملحق jQuery صغير لذلك.

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

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

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

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

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

(أجب جزئيا عن نسخ: jQuery document.createElement المكافئ؟ )


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

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

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


وهنا أسلوب آخر لإنشاء 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>


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


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

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

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


$(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 ، فأنت أفضل من إجابة إيان . بخلاف ذلك ، سأستخدم هذه الطريقة:

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

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


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

سيؤدي هذا إلى إنشاء div جديد يحمل المعرّف "جديد" في الجسم.


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

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

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

document.createElement('div');




jquery-append