次のように、すべての画像リンクに新しいリンクを追加してdiv
います。
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var divLink = document.createElement("div");
divLink.style.position = "absolute";
divLink.style.top = "10px";
divLink.style.right = "10px";
divLink.style.zIndex="1";
divLink.style.fontSize = "20px";
divLink.style.backgroundColor = "black";
divLink.style.color = 'white';
divLink.innerHTML = linkCount;
images[i].parentNode.insertBefore(divLink, images[i] );
}
上記のコードは、新しい divLink 属性を次の HTML に追加します。
<li>
<div>
<a title="Free Shipping" href="http://www.url.com/cp/School-Uniforms" onclick="s_objectID="http://www.url.com/cp/School-Uniforms/">
<img width="100" height="100" border="0" src="http://i9.url.com/images/Site/Apparel.jpg" alt="Free Shipping">
</a>
</div>
<div class="cat1">Apparel</div>
<div class="cat2">
<a title="Free Shipping" href="http://www.url.com/cp/School-Uniforms" onclick="s_objectID="http://www.url.com/cp/School-Uniforms">Free Shipping</a>
</div>
</li>
画像に属さないすべてのテキスト リンクに同様の要素を追加する必要があります。次を使用してすべてのリンクを見つけることができることを知っています:
var links = document.querySelectorAll("a");
画像を含むリンクを分離し、画像に属さないリンクのみを選択して、追加する属性が画像を含むリンクに 2 回追加されないようにするにはどうすればよいですか。