-1

次の 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')してすべてのアンカー タグを取得できますが、.after()または.before()メソッドの JavaScript コードを作成するにはどうすればよいですか?

上記の jQuery コードを JavaScript に変換するのを手伝ってください。

これが私が行ったJqueryコードです:

http://jsfiddle.net/5dgZV/

そして、ここにJavascriptコードがありますが、すべてのアンカーの後に画像を挿入できません:

http://jsfiddle.net/REuJP/

4

2 に答える 2

1

aこれは、すべてのタグに同じ DOM を繰り返し追加しようとしているために発生していると思います。ループの反復ごとに新しい要素を作成した場合は、機能するはずです。

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 で質問する前に、Google で簡単に検索する必要がありますが、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 に答える