jQuery从链接获取href并将其作为HTML输出

Question

不确定这是否是正确的措辞，但基本上我想从下面的链接获取图片网址。

<a class="attachment" href="image-url.jpg"></a>

然后创建以下内容：

<img class="attachment" src="image-url.jpg">

Answer 1

您可以使用 .attr() ：

$('img.attachment').attr('src', $('a.attachment').attr('href'));

Answer 2

如果您想在页面加载时将a.attachement元素替换为img元素

jQuery(function () {
    $('a.attachment').replaceWith(function () {
        return $('<img />', {
            'class': this.className,
            src: $(this).attr('href')
        })
    })
})

演示：Fiddle

---

如果您想点击链接进行更换

jQuery(function () {
    $('a.attachment').click(function (e) {
        e.preventDefault();
        $(this).replaceWith(function () {
            return $('<img />', {
                'class': this.className,
                src: this.href
            })
        })
    })
})

演示：Fiddle

Answer 3

  

在jquery中使用 prop（） 。获取第一个元素的属性值   在匹配元素集合中。

var imgSource =  $('a.attachment').prop('href');

$('img.attachment').prop('src', imgSource);