.after() метод jQuery в родном JavaScript?

Question

Мне нужно написать следующий JQuery код в родной Javascript:

$("a[href $= pdf]").after("<img src='images/small_pdf_icon.gif' align='center' />"); 

А вот мой HTML:

<ul class="navlist" id="navlinks"> 
    <li><a href="someurl.html">Link #1</a></li> 
    <li><a name="#anchor1">Named Anchor Link</a></li> 
    <li><a href="someurl.html">Link #2</a></li> 
    <li><a href="someurl.pdf">Link #3</a></li> 
    <li><a href="someurl.html">Link #4</a></li> 
    <li><a href="someurl.html">Link #5</a></li> 
    <li><a href="someurl.pdf">Link #6</a></li> 
    <li><a href="someurl.html">Link #7</a></li> 
    <li><a href="mailto:joe@joe.com">Email Link</a></li> 
    <li><a href="someurl.pdf">Link #6</a></li> 
    <li><a href="someurl.pdf">Link #6</a></li> 
    <li><a href="someurl.pdf">Link #6</a></li> 
</ul> 

я могу использовать document.querySelectorAll('a'), чтобы получить все теги привязки, но как я могу писать код JavaScript для .after() или .before() методов?

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

Вот код Jquery, который я сделал:

http://jsfiddle.net/5dgZV/

И вот Javascript код, но я не могу вставить изображение после всех якорей:

http://jsfiddle.net/REuJP/

Answer 1

Я думаю, что это происходит потому, что вы неоднократно пытались добавить один и тот же DOM к каждому тегу a. Если вы создали новый элемент для каждой итерации цикла, он должен работать:

for(var i=0;i<document.querySelectorAll('a').length;i++){ 
    var imgSrc=document.createElement("img"); 
    imgSrc.setAttribute("src", "http://i.imgur.com/YXsJZVe.gif"); 
    document.querySelectorAll('a')[i].appendChild(imgSrc); 
} 

Working Fiddle

Answer 2

в то время как я не решаюсь показать вам, как это сделать, вы должны заглянуть в DOM api специально по методу insertBefore. Несмотря на то, что вам действительно нужно выполнить быстрый поиск по Google, прежде чем задавать вопросы здесь, на SO, вот ссылка на insertBeforehttps://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore.

insertAfter - это то, что вы бы установили, используя пользовательскую функцию. как этот

insertAfter(newNode){ 
     var refNode = document.getElementById("xyz"); 
     refNode.parentNode.insertBefore(newNode, refNode.nextSibling); 
    } 

newNode в этом случае является фактическим DOM элементом. который будет создан следующим образом: var newNode = document.createElement("p");

Изменить тип p для типа элемента, который вы хотите создать. в вашем случае это будет img. Затем вы можете установить соответствующие атрибуты/Свойства, а затем отправить их на insertAfter выше. Если вам нужно указать refNode, добавьте для него аргумент следующим образом: insertAfter(newNode,refNode).

Способ использования этого с jquery будет insertAfter(newNode,$("#findme")), так что у вас есть представление о том, что происходит, очевидно, если вы добавите аргумент refNode, удалите декларацию из тела функции.