Добавление HTML-элементов с помощью JavaScript

Question

Итак, если у меня есть HTML, как это:

<div id='div'>
  <a>Link</a>

  <span>text</span>
</div>

Как я могу использовать JavaScript, чтобы добавить элемент HTML, где эта пустая строка?

Answer 1

node = document.getElementById('YourID');
node.insertAdjacentHTML('afterend', '<div>Sample Div</div>');

Доступные опции

до начала, после начала, до конца, после

Answer 2

Вместо того, чтобы обращаться с потомками <div>, как и в других ответах, если вы знаете, что всегда хотите вставить после элемента <a>, присвойте ему идентификатор, а затем вы можете вставить относительно его братьев и сестер:

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

Это позволит вам всегда гарантировать, что ваш новый элемент будет следовать по ссылке.

Answer 3

Поскольку вы не упомянули какое-либо использование библиотек 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);

Answer 4

jQuery имеет красивую встроенную функцию для этого: after (), в http://api.jquery.com/after/

В вашем случае вам, вероятно, понадобится такой селектор, как этот:

$('#div a').after('<p>html element to add</p>');

Примеры кода по приведенной выше ссылке также показывают, как загрузить jQuery, если это ново для вас.

Answer 5

Если вы хотите использовать что-то вроде jQuery, вы можете сделать что-то вроде этого:

$('#div a').after("Your html element");

Answer 6

Предполагается, что вы добавляете только один элемент:

document.getElementById("div").insertBefore({Element}, document.getElementById("div").children[2]);