Javascript 如何使用JS在HTML中动态添加图像链接？

我有50个像下面这样的div，图像是不可点击的。我想让图像可以点击，这取决于div包含的链接：它总是文章标题标签中的href链接

我如何通过添加几行JavaScript来实现这一点

我想手动为每个img标记添加一个ID，然后使用getElementById并执行一些魔术，但这会花费太长时间

<div class="col-md-4 article">
      <img src="7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235"> 
      <div class="article_category">
         <a href=”http://www.canarywharfian.co.uk/forums/wealth-management/”>Wealth Management</a> 
      </div>
      <div class="article_meta">
         <h1 class="article_title"><a href="http://www.canarywharfian.co.uk/threads/7-tips-for-lasting-in-your-career.242/" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1>
         <div class="col-md-6 author_date"><a href="http://www.canarywharfian.co.uk/members/smallcappm.1140/">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div>
         <div class="article_abstract">
            Many of you are hoping and planning for a long and successful career in finance...
         </div>
      </div>
   </div>

-2016年3月10日
你们中的许多人都希望并计划在金融领域有一个长期而成功的职业生涯。。。

可能是这样（使用jQuery）：

$（文档）.ready（函数（）{
$（'.block'）。每个（函数（索引、值）{
让href=$（this.find（'a[href]'））.attr（'href'）；
$（this.find（'img'）.wrap（“”）；
});
});

如果使用jQuery，可以简单地用元素包装图像

$（函数（）{
//遍历所有图像
$（'img'）。每个（函数（）{
//通过从父级查找来获取链接
var link=$（this.parent（）.find（'.article_title a'）.attr（'href'）；
//用链接+图像替换图像
$（此）。替换为（“”）；
});
});

-2016年3月10日
你们中的许多人都希望并计划在金融领域有一个长期而成功的职业生涯。。。
根据你的vanila Javascript标签，你能做的就是搜索并缓存你所有的
文章。在每篇文章中，在标题内搜索锚定，并将其
href
设置为新创建的锚定。将图像附加到新创建的锚中，并将其添加到文章中

一个简单的示例（演示时减小了H1字体大小）：


var articles=document.getElementsByClassName（'article'）；
[]forEach.call（文章、函数（文章）{
var image=article.querySelector（'img:first child'）；
var title=article.querySelector（'h1.article_title>a'）；
var anchor=document.createElement（'a'）；
anchor.href=title.href；
anchor.appendChild（图像）；
第条.插入前（主播，第条.第一个孩子）；
});
h1{font size:12px；}

-2016年3月10日
你们中的许多人都希望并计划在金融领域有一个长期而成功的职业生涯。。。

-2016年3月10日
你们中的许多人都希望并计划在金融领域有一个长期而成功的职业生涯。。。
你说它会花费太长是什么意思？如果只需要几行JS，我可以节省时间。你可以使用循环，我应该用什么来代替“索引，值”？我在问bc我没有看到它们出现在下面的代码中。您可以将它们排除在外。我应该输入类名而不是.block，对吗？它不是一个ID，这不是一个问题吗？它是一个类名，因为你有很多你想改变东西的人。哦，我犯了一个错误：您应该用新的锚标记包装图像，而不是更改其src属性。现在让我来修复它…经过更改和测试。现在它应该用href属性将图像包装在标签中。这很好，但是它在文章分类div中返回href。我需要文章标题中的href。你是上帝。非常感谢。我还有一个问题。您能告诉我如何动态删除文章\u category div中href的“canarywharfian.co.uk”部分吗？我需要删除该部分，否则如果用户单击canarywharfian.co.uk/canarywharfian.co.uk/path将加载不正常的内容。@D.Richard使用此功能，您可以获取域>>。然后您只需使用它来编辑href>>$（'[href]'）。每个（function（）{link=$（this.attr（'href'）；domain=extractDomain（link）；new_href=link.replace（domain'，）；$（this.attr（'href'，new_href）；}）这个函数在所有的href中循环？我只需要它在div中第一次出现。
<script>
    $(document).ready(function () {
        $('.block').each(function( index, value ) {
            let href = $(this).find('a[href]').attr('href');
            $(this).find('img').wrap('<a href=' + href + '></a>');
        });
    });
</script>