كيفية إلحاق الطفل من قبل.النموذج المبدئي

Question

أقوم بإنشاء موقع ويب باستخدام مكتبة جافا سكريبت.إذا قام المستخدم بتحديد خيار في مربع القائمة المنسدلة (تحديد)، فيجب إضافة تسمية ومربع نص.أفعل هذا باستخدام خيار appendChild.المشكلة الوحيدة في خيار appenChild هي أن العناصر تُضاف دائمًا بعد العناصر الموجودة في العنصر المستخدم.هذا هو الكود الخاص بي:

var newFreeformLabel = document.createElement('label');
newFreeformLabel.innerHTML = 'Omschrijving:';
var newFreeformField = document.createElement('input');
newFreeformField.className = 'textfield';
newFreeformField.name = 'factuur_orderregel[]';
var newFreeformSpacer = document.createElement('div');
newFreeformSpacer.className = 'spacer';

container.appendChild(newFreeformLabel);
container.appendChild(newFreeformField);
container.appendChild(newFreeformSpacer);

الحاوية هنا هي العنصر الذي يجب إضافة العناصر إليه.المشكلة الوحيدة هي أن العناصر تضاف في نهاية العنصر وأريد إضافة العناصر في بداية عنصر html.

Answer 1

وكذلك appendChild، والعقد DOM لها insertBefore طريقة

container.insertBefore(newFreeformLabel, container.firstChild);

Answer 2

Element.insert (عنصر، والمحتوى) .

Answer 3

container.prepend(newChild);

وتمت إضافة هذا في ES5. ومن JS الفانيليا والمتوفرة حاليا في 90٪ من المتصفحات ، بما في ذلك كروم، FF ، وأوبرا.

وبالإضافة إلى ذلك، فإن newFreeformLabel.after(newFreeformField); تسمح لك لإدراج في النظام، إذا رغبت في ذلك. .before هو أيضا خيار

والروابط: developer.mozilla.org - Polyfill

Answer 4

container.
    insert({
        // key is position
        // 'before', 'after', 'top' and 'bottom' are allowed
        top: new Element('label').
            update('Omschrijving:')
    }).
    insert({
        top: new Element('input').
            addClassName('textfield').
            writeAttribute('name', 'factuur_orderregel[]')
    }).
    insert({
        top: new Element('div').
            addClassName('spacer')
    });

أعتقد أن النموذج الأولي Element.insert أمر محرج إلى حد ما ل before/after, ، لكن.على سبيل المثال، إذا أردت وضع .spacer قبل .textfield, ، في وقت لاحق من التعليمات البرمجية الخاصة بك، ستحتاج إلى القيام بشيء مثل:

container.
    down('.textfield').
    insert({
        before: new Element('div').
            addClassName('spacer')
    });

هذا، خاصة إذا كنت معتادًا على DOM API Element.insertBefore, ، غير بديهي إلى حد ما، كما أنت لا إدخال .spacer داخل ال .textfield, ، ولكن بدلاً من ذلك في container, قبل ال .textfield.

Answer 5

إذا كنت قد رأيت حل غاريث في الوقت المحدد، وأنا قد يذهب مع ذلك، كما كان اعتدت:

$('toggle_product').innerHTML = insertContent + $('toggle_product').innerHTML;

وظيفة

وكما إدراج نماذج "() كان عائدا خطأ في IE8 ..