gpt4 book ai didi

javascript - 如何在纯js中克隆图像

转载 作者:行者123 更新时间:2023-11-28 02:30:24 25 4
gpt4 key购买 nike

我写了 JS 来克隆图像并将这个 Action 附加到按钮上。
它有效,但我不确定这种更好的方法。

我的问题:

  • 使用 querySelector 返回元素是否正确,还是为按钮和图片添加额外的类或 id 更好?
  • 在这种情况下使用 cloneNode 是最优的还是使用其他方式更好?

(function() {
'use strict';
document.querySelector('button[action="button"]').addEventListener('click', function() {
let image = document.querySelector('img[alt="Dog"]');
let cln = image.cloneNode(true);
document.getElementById('image-section').appendChild(cln);
});
})();
<body>
<div id="overview">
<section class="section--center">
<button action="button">Yeah, I want more dogs!</button>
</section>
<section class="section--center" id='image-section'>
<img src="https://www.purina.com/sites/g/files/auxxlc196/files/styles/kraken_generic_max_width_480/public/HOUND_Beagle-%2813inch%29.jpg?itok=lN915WHC" alt="Dog" style="width: 150px">
</section>
</div>
</body>

最佳答案

另一种选择是更新 innerHTML,但并没有更好。一种方法应该解决一个任务,因此它取决于任务。

(function() {
'use strict';
document.querySelector('button[action="button"]').addEventListener('click', function() {
document.getElementById('image-section').innerHTML +=
document.querySelector('img[alt="Dog"]').outerHTML;
});
})();
<body>
<div id="overview">
<section class="section--center">
<button action="button">Yeah, I want more dogs!</button>
</section>
<section class="section--center" id='image-section'>
<img src="https://www.purina.com/sites/g/files/auxxlc196/files/styles/kraken_generic_max_width_480/public/HOUND_Beagle-%2813inch%29.jpg?itok=lN915WHC" alt="Dog" style="width: 150px">
</section>
</div>
</body>

关于javascript - 如何在纯js中克隆图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51063923/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com