关于原生js把html中已有的img标签的src赋给一个新的img标签

时间:2022-06-16 15:23:12

遇到要实现“html中已有的img标签的src赋给一个新的img标签的”这种功能需求,通常第一浮想的想法应该是这样的,例如:

<div id="testBox">

<ul id="set">
<li><img src="images/cloth.png"></li>
</ul>

<ul id="get">

<li><img src=""></li>

</ul>
</div>

 document.getElementById("set").getElementsByTagName("li")[0].children[0].src//要接受src的img

= document.getElementById("set").getElementsByTagName("li")[0].children[0].src//提供src的img

而console.log("testBox里img的src:"+document.getElementById("set").getElementsByTagName("li")[0].children[0].src)//提供src的img的打印结果为:

关于原生js把html中已有的img标签的src赋给一个新的img标签

而我们只需要images/cloth.png,这样就有悖预期的想法。为了解决这个问题,就收集了一些解决方法,这里跟大家分享一下。

 document.getElementById("set").getElementsByTagName("li")[0].children[0].src//要接受src的img

= document.getElementById("set").getElementsByTagName("li")[0].children[0].attributes["src"].nodeValue//提供src的img;

再来看一下打印结果:

关于原生js把html中已有的img标签的src赋给一个新的img标签

这样的话就成功获取到了想要的src了。