-1

我需要用原生 Javascript 编写以下 jQuery 代码：

$("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')来获取所有锚标记，但我如何为.after()或.before()方法编写 JavaScript 代码？

请帮我把上面的 jQuery 代码转换成 JavaScript。

这是我完成的 Jquery 代码：

http://jsfiddle.net/5dgZV/

这是 Javascript 代码，但我无法在所有 Anchors 之后插入图像：

http://jsfiddle.net/REuJP/

4

2 回答 2

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

工作小提琴

于 2013-05-05T18:02:34.733 回答
-1

虽然我不愿向您确切展示如何执行此操作，但您应该DOM专门研究 api 的方法insertBefore。虽然在 SO 上提问之前你真的应该做一个快速的谷歌搜索，这里是对insertBefore https://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参数，则从函数体中删除声明。

于 2013-05-05T16:28:30.330 回答