Добавление элементов HTML с JavaScript
Так, если у меня есть HTML как это:
<div id='div'>
<a>Link</a>
<span>text</span>
</div>
Как я могу использовать JavaScript для добавления элемента HTML, где та пустая строка?
5 ответов
Поскольку вы не упомянули об использовании библиотек javascript (таких как jquery, dojo), вот кое-что Pure javascript.
var txt = document.createTextNode(" This text was added to the DIV.");
var parent = document.getElementById('div');
parent.insertBefore(txt, parent.lastChild);
или
var link = document.createElement('a');
link.setAttribute('href', 'mypage.htm');
var parent = document.getElementById('div');
parent.insertAfter(link, parent.firstChild);
Если вы хотите использовать что-то вроде jQuery, вы можете сделать что-то вроде этого:
$('#div a').after("Your html element");
jQuery имеет прекрасную встроенную функцию для этого: after (), по адресу http://api.jquery.com/after/
В вашем случае вы будете вероятно, вам нужен такой селектор:
$('#div a').after('<p>html element to add</p>');
Примеры кода из приведенной выше ссылки также показывают, как загрузить jQuery, если это для вас в новинку.
Вместо того, чтобы иметь дело с дочерними элементами А затем вставить новый элемент сразу после этого элемента: Это позволит вам всегда гарантировать, что ваш новый элемент следует по ссылке. , присвойте ему идентификатор , а затем вы можете вставить относительно его братьев и сестер:
<div id="div">
<a id="div_link">Link</a>
<span>text</span>
</div>
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);
}
Предполагается, что вы добавляете только один элемент:
document.getElementById("div").insertBefore({Element}, document.getElementById("div").children[2]);