Eğer böyle bir HTML'im varsa:JavaScript içeren HTML öğeleri ekleme
<div id='div'>
<a>Link</a>
<span>text</span>
</div>
Bu boş satırın bulunduğu bir HTML öğesini eklemek için JavaScript'i nasıl kullanabilirim?
Eğer böyle bir HTML'im varsa:JavaScript içeren HTML öğeleri ekleme
<div id='div'>
<a>Link</a>
<span>text</span>
</div>
Bu boş satırın bulunduğu bir HTML öğesini eklemek için JavaScript'i nasıl kullanabilirim?
sen (jquery, dojoda gibi) javascript kütüphanelerinin herhangi kullanımını söz etmedi gibi, burada bir şey Saf javascript var. Kodlama
var txt = document.createTextNode(" This text was added to the DIV.");
var parent = document.getElementById('div');
parent.insertBefore(txt, parent.lastChild);
veya
var link = document.createElement('a');
link.setAttribute('href', 'mypage.htm');
var parent = document.getElementById('div');
parent.insertAfter(link, parent.firstChild);
mutlu.
böyle bir şey yapabilirsiniz:
$('#div a').after("Your html element");
jQuery bunun için işlevinde inşa güzel vardır: istediğiniz muhtemelen olacaktır durumda http://api.jquery.com/after/
de, sonra() Böyle bir seçici: dan
$('#div a').after('<p>html element to add</p>');
kod örnekleri Yukarıda verilen bağlantı, jQuery'yi nasıl yükleyeceğinizi size gösterir.
yerine diğer cevaplar gibi,<div>
'ın çocukları ile başa
document.getElementById("div").insertBefore({Element}, document.getElementById("div").children[2]);
yalnızca bir unsur ilave varsayarsak
<div id="div">
<a id="div_link">Link</a>
<span>text</span>
</div>
ve sonra o öğeden sonra doğrudan yeni bir unsur eklemek: kimlik ve sonra onun kardeşleri göreli ekleyebilirsiniz
var el = document.createElement(element_type); // where element_type is the tag name you want to insert
// ... set element properties as necessary
var div = document.getElementById('div');
var div_link = document.getElementById('div_link');
var next_sib = div_link.nextSibling;
if (next_sib)
{
// if the div_link has another element following it within the link, insert
// before that following element
div.insertBefore(el, next_sib);
}
else
{
// otherwise, the link is the last element in your div,
// so just append to the end of the div
div.appendChild(el);
}
Bu, yeni öğenizin bağlantıyı takip etmesini her zaman garanti etmenizi sağlayacaktır.
, sen hep <a>
öğeden sonra eklemek istediğiniz biliyorsanız, bunu bir verin:
node = document.getElementById('YourID');
node.insertAdjacentHTML('afterend', '<div>Sample Div</div>');
Mevcut Seçenekler
beforebegin, afterbegin, beforeend, afterend
Bu da oldukça iyi bir tarayıcı desteği var. Eski IE'lerde tablolarla birlikte kullanmayı planlıyorsanız. http://caniuse.com/#feat=insertadjacenthtml – cptnk
'document.getElementById ('# div')' boş olacak, muhtemelen anlamına 'belgesi. getElementById ('div') ' –
Bu yanlış. * insertBefore * global bir işlev değildir, * HTMLElement * prototipinde bir yöntemdir. Doğru yöntem 'parentElement.insertBefore (newElement, childElement)' dır. –
Ah, benim kötülük. Teşekkürler. – simplyharsh