Ни один из этих методов jQuery не имеет точного 1-к-1 аналога в простом JS на основе DOM.Если бы они это сделали, jQuery не потребовал бы реализации собственных методов для выполнения этих задач.
Вы можете получить предыдущего и следующего братьев и сестер для элемента, используя elem.previousSibling и elem.nextSibling.Например, с этой структурой HTML:
<ul>
<li>First</li>
<li id="second">Second</li>
</ul>
Вы бы использовали этот JS:
var elem = document.getElementById("second");
var p = elem.previousSibling;
alert(p.nodeType);
В этом случае предыдущий брат второго LI - not первый LI.Вместо этого предыдущий брат - пустой пробел между двумя тегами LI.Это было сделано для того, чтобы вы могли манипулировать любым текстовым узлом в документе в дополнение к фактическим элементам HTML.Свойство nextSibling работает идентично.
Это хорошо в теории, но это более или менее болезненно при фактическом использовании, потому что вам редко или никогда не понадобится манипулировать пробелами в документе,Чтобы обойти, переберите братьев и сестер, проверяя nodeType.Если nodeType равен 1, то это текстовый узел, поэтому переходите к следующему, пока не найдете тот, у которого nodeType не равен 1.
Вы можете найти сообщение в блоге Поиск элементов HTML с помощью Javascript nextSiblingа предыдущий брат полезен.Просто избегайте технику расширения Object.prototype, которую он использует - очень просто разбить for/in петли на объекты, делая это.
Что касается before() и after(), DOM-эквивалент равен insertBefore() и insertBefore() бегите по брату ПОСЛЕ цели, которую вы хотите.Тем не менее, вы не можете просто добавить в них HTML-код и ожидать, что он будет работать.Вместо этого вы должны вручную создать каждый элемент, атрибут и значение как узлы DOM, а затем вставить их.Например:
var welcomingDiv;
function sayHi(){
welcomingDiv = document.createElement("div");
welcomingDiv.innerHTML = "Welcome, and be amazed!";
target = document.getElementById("a-tag-someplace");
document.body.insertBefore(welcomingDiv, target);
}
Это вставит его в ваш документ прямо перед тем тегом, у которого есть идентификатор "a-tag-someplace".Даже это своего рода обман, так как innerHTML не является частью официального стандарта JS.Если вы делаете это правильно, вам нужно будет создать текстовый узел и добавить его в только что созданный DIV.
Итак, вкратце: jQuery делает жизнь намного проще.Не изобретайте велосипед без уважительной причины.