إدراج عناصر HTML مع جافا سكريبت

Question

بدلا من مضجر البحث عن الحلول لكل نوع من سمة الحدث عند استخدام بناء الجملة التالي:

   elem = document.createElement("div");
   elem.id = 'myID';
   elem.innerHTML = ' my Text '
   document.body.insertBefore(elem,document.body.childNodes[0]);

هل هناك طريقة يمكنني فقط أن تعلن كامل HTML عنصر سلسلة ؟ مثل:

  elem = document.createElement("<div id='myID'> my Text </div>");
  document.body.insertBefore(elem,document.body.childNodes[0]);

Answer 1

بدلا من مباشرة العبث innerHTML قد يكون من الأفضل إنشاء جزء ثم إدراج ذلك:

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

الفوائد:

1. يمكنك استخدام الأصلية دوم طرق إدراج مثل insertBefore, appendChild.... الخ
2. لديك حق الوصول إلى الفعلية دوم العقد قبل الإنجاز.يمكنك الوصول إلى جزء هو childNodes الكائن.
3. باستخدام وثيقة شظايا جدا سريعة ؛ أسرع من خلق عناصر خارج دوم و في بعض الحالات أسرع من innerHTML.

---

على الرغم من innerHTML يستخدم من خلال وظيفة, كل شيء يحدث خارج دوم حتى انها أسرع بكثير مما كنت أعتقد...

Answer 2

وأنت تريد هذا

document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );

Answer 3

إلقاء نظرة على insertAdjacentHTML

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

موقف هو الموقف بالنسبة إلى العنصر الذي يتم إدراج المجاورة:

'beforebegin' قبل أن العنصر نفسه

'afterbegin' فقط داخل عنصر قبل الطفل الأول

'beforeend' فقط داخل العنصر بعد آخر طفل

'afterend' بعد العنصر نفسه

Answer 4

في المدرسة القديمة جافا سكريبت، هل يمكن أن تفعل هذا:

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;

في الرد على تعليقك:

<اقتباس فقرة>   

[...] كنت مهتما في إعلان مصدر الصفات والأحداث عنصرا جديدا، وليس innerHTML عنصر.

وتحتاج لحقن HTML جديدة في DOM، على الرغم؛ لهذا السبب يستخدم innerHTML في المدرسة القديمة جافا سكريبت سبيل المثال. وإرفاق مسبقا على innerHTML العنصر BODY مع HTML جديدة. نحن لا لمس حقا HTML الموجودة داخل BODY.

وسوف إعادة كتابة المثال المذكور أعلاه لتوضيح هذا:

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'

ووباستخدام إطار جافا سكريبت جعل هذا الرمز أقل بكثير مطول وتحسين إمكانية القراءة. على سبيل المثال، مسج يسمح لك أن تفعل ما يلي:

$('body').prepend('<p id="foo">Some HTML</p>');

Answer 5

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

وأنا استخدم نموذج لالنموذجيه عن طريق إضافة عناصر "قالب" لDIV مخفي ومن ثم استخدام cloneNode (صحيح) لإنشاء نسخة وإلحاق كما هو مطلوب. نضع في دائرة الهجرة والجنسية أن كنت بحاجة للتأكد من إعادة تعيين معرف كما هو مطلوب لمنع الازدواجية.

Answer 6

إذا كنت ترغب في إدراج كود HTML داخل استخدام هذا الكود صفحة موجودة في Jnerator . تم إنشاء هذه الأداة خصيصا لهذا الهدف.

وبدلا من كتابة التعليمات البرمجية التالية

    var htmlCode = '<ul class=\'menu-countries\'><li
        class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
        class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
        class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

ويمكنك كتابة هيكل أكثر قابلية للفهم

    var jtag = $j.ul({
        class: 'menu-countries',
        child: [
            $j.li({ class: 'item', child: [
                $j.img({ src: 'au.png' }),
                $j.span({ child: 'Australia' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'br.png' }),
                $j.span({ child: 'Brazil' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'ca.png' }),
                $j.span({ child: 'Canada' })
            ]})
        ]
    });
    var htmlCode = jtag.html();
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

Answer 7

وكما قال آخرون مريحة مسج أرفقت وظيفة يمكن ان يحتذى:

var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;

وبينما يقول البعض أنه من الأفضل عدم "فوضى" مع على HTML داخلي ، أو أنه يمكن الاعتماد عليها في كثير من حالات الاستخدام، إذا كنت تعرف هذا:

<اقتباس فقرة>   

إذا عقدة <div>، <span>، أو <noembed> لديها عقدة النص الطفل الذي يتضمن حرفا (&)، (<)، أو (>)، HTML داخلي يعود هذه الأحرف كما &amp، &lt و&gt على التوالي. استخدام Node.textContent للحصول على النسخة الصحيحة من محتويات هذه العقد النص ".

https://developer.mozilla.org/en -US / مستندات / الانترنت / API / العنصر / HTML داخلي

وأو:

var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)

وinsertAdjacentHTML من المحتمل ان يكون بديلا جيدا: HTTPS: // developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML