我基本上尝试使用纯 JavaScript 在类名 img-caption
的每个 img
元素下面添加一个标题。我找到了一些解决方案,但它们都使用 jQuery,我正在寻找一个简单的 javascript 解决方案。
我现在拥有的是这个不起作用的代码(修改自 this question ):
//insertAfter() needs to be updated
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function inserCaption() {
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
var NewSpan = document.createElement("span");
var Caption = document.getElementsByTagName("img")[i].getAttribute("title");
NewSpan.innerHTML = Caption;
var ImgTag = document.getElementsByTagName("img");
//I need a function inserAfter() to insert the titles after each image
insertAfter(ImgTag, NewSpan);
}
}
<img title="Hi" class="img-caption" src="http://i.imgur.com/KnX16nj.png"/>
<img title="Hello" class="img-caption" style="height:126px; width: auto;" src="http://i.imgur.com/naajTCH.png"/>
<button style="display:blocK" onclick="inserCaption()">Display Image Title</button>
到目前为止,我已经能够选择所有 img
元素并获取它们的 title
属性。我缺少的是选择具有特定类名 img-caption
的 img
以及更重要的是,如何实际插入相应的 title
每个属性后面 img
作为 span
元素。
由于我只修改了现有的工作,所以我真的不知道 insertAfter()
是如何工作的。就 JavaScript 而言,我还不是一个初学者,只是为了澄清一下。
最佳答案
您可以使用querySelectorAll以与 jQuery 相同的方式查找具有特定标签和类的元素:
var imgs = document.querySelectorAll("img.img-caption");
我也改变了:
insertAfter(imgs[i], NewSpan);
//insertAfter() needs to be updated
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function inserCaption() {
var imgs = document.querySelectorAll("img.img-caption");
for (var i = 0; i < imgs.length; i++) {
var NewSpan = document.createElement("span");
var Caption = imgs[i].getAttribute("title");
NewSpan.innerHTML = Caption;
insertAfter(imgs[i], NewSpan);
}
}
<img title="Hi" class="img-caption" src="http://i.imgur.com/KnX16nj.png" />
<img title="Hello" class="img-caption" style="height:126px; width: auto;" src="http://i.imgur.com/naajTCH.png" />
<button style="display:blocK" onclick="inserCaption()">Display Image Title</button>
关于javascript - 使用纯 JavaScript 在具有特定类的每个图像之后插入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45898578/