JavaScript ile HTML öğeleri ekleme

Aşağıdaki sözdizimini kullanırken her tür öznitelik ve olay için sıkıcı bir şekilde geçici çözümler aramak yerine:

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

HTML elemanının tamamını bir dizge olarak bildirmenin bir yolu var mı? sevmek:

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

Doğrudan uğraşmak yerine, innerHTMLbir parça oluşturmak ve ardından bunu eklemek daha iyi olabilir:

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

Faydaları:

1. Ekleme için insertBefore, appendChild vb. Gibi yerel DOM yöntemlerini kullanabilirsiniz.
2. Eklenmeden önce gerçek DOM düğümlerine erişiminiz vardır; parçanın childNodes nesnesine erişebilirsiniz.
3. Belge parçalarını kullanmak çok hızlıdır; DOM dışında öğeler oluşturmaktan daha hızlı ve belirli durumlarda innerHTML'den daha hızlı.

innerHTMLİşlevin içinde kullanılsa bile , bunların hepsi DOM'un dışında gerçekleşiyor, bu yüzden düşündüğünüzden çok daha hızlı ...

Bunu istiyorsun

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

İnsertAdjacentHTML'ye bir göz atın

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>

konum , bitişik olarak eklediğiniz öğeye göre konumdur:

'beforebegin' Elemanın kendisinden önce

'afterbegin' Öğenin hemen içinde, ilk çocuğundan önce

'beforeend' Öğenin hemen içinde, son çocuğundan sonra

'afterend' Öğenin kendisinden sonra

Eski okul JavaScript'te şunu yapabilirsiniz:

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

Yorumunuza yanıt olarak:

[...] innerHTMLBir öğenin değil, yeni bir öğenin özniteliklerinin ve olaylarının kaynağını bildirmekle ilgileniyordum .

Yine de, yeni HTML'yi DOM'a eklemeniz gerekir; bu yüzden innerHTMLeski okul JavaScript örneğinde kullanılır. innerHTMLBir BODYelemanın yeni HTML ile başına eklenir. İçindeki mevcut HTML'ye gerçekten dokunmuyoruzBODY .

Bunu açıklığa kavuşturmak için yukarıda bahsedilen örneği yeniden yazacağım:

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'

Bir JavaScript çerçevesi kullanmak, bu kodu çok daha az ayrıntılı hale getirir ve okunabilirliği artırır. Örneğin, jQuery aşağıdakileri yapmanızı sağlar:

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

Adil olmak gerekirse, oldukça yeni ve sınırlı olan bilgime göre, bu teknikle ilgili tek potansiyel sorun, bazı tablo öğelerini dinamik olarak oluşturmanın engellenmesidir.

Gizli bir DIV'ye "şablon" öğeleri ekleyerek ve ardından bir klon oluşturmak için cloneNode (true) kullanarak ve gerektiği gibi ekleyerek şablon oluşturmak için bir form kullanıyorum. Yinelemeyi önlemek için id'leri gerektiği gibi yeniden atadığınızdan emin olmanız gerektiğini unutmayın.

Diğerlerinin dediği gibi, kullanışlı jQuery başa ekleme işlevi taklit edilebilir:

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

Bazıları innerHTML ile "uğraşmamanın" daha iyi olduğunu söylese de, bunu biliyorsanız birçok kullanım durumunda güvenilirdir:

Bir ederse <div>, <span>ya da <noembed>düğüm karakterleri içeren bir çocuk metin düğümü (vardır &), ( <), ya da ( >), innerHTML olarak bu karakterleri verir &amp, &ltve &gtsırasıyla. KullanımNode.textContentBu metin düğümlerinin içeriklerinin doğru bir kopyasını almak için .

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Veya:

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

insertAdjacentHTMLmuhtemelen iyi bir alternatif: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Mevcut sayfanın etiketinin içine HTML kodu eklemek istiyorsanız Jnerator'ı kullanın . Bu araç, bu amaç için özel olarak oluşturulmuştur.

Sonraki kodu yazmak yerine

    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;

Daha anlaşılır bir yapı yazabilirsiniz

    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;