使用 JavaScript 按下按钮时如何创建 img 元素？

Question

When I click I want an img tag to be generated and with an image I have tried several ways but it doesn't work.

 var oferr=document.getElementsByClassName("a")[0]; var new=document.getElementsByClassName("create") oferr.addEventListener('click', function () { let new_element=document.createElement('img'); let image=document.createAttribute('src','img/imagen_1'); new_element.appendChild(imagen); new.appendChild(new_element); })

 <div class="ad"> <h1>10% discount</h1> </div> <header> <div class="logo"> <h2 class="name">Environments</h2> </div> <nav> <a href="" class="nav-link">Offers</a> <a href="" class="nav-link">Products</a> <a href="" class="nav-link">Login</a> </nav> </header> <div id="create"> </div> <script src="/js/main.js"></script>

Answer 1

Just set the image's .src property to the source URL.

create is an ID, not a class, so use document.getElementById() .

The anchors don't have class="a" , you should use document.getElementsByClassName("nav-link") .

You need to use Event.preventDefault() in the event listener to prevent following the links.

You can't use new as a variable name because it's a reserved keyword.

 var oferr=document.getElementsByClassName("nav-link")[0]; var create=document.getElementById("create") oferr.addEventListener('click', function (e) { e.preventDefault(); let new_element=document.createElement('img'); new_element.src = 'img/imagen_1'; create.appendChild(new_element); })

 <div class="ad"> <h1>10% discount</h1> </div> <header> <div class="logo"> <h2 class="name">Environments</h2> </div> <nav> <a href="" class="nav-link">Offers</a> <a href="" class="nav-link">Products</a> <a href="" class="nav-link">Login</a> </nav> </header> <div id="create"> </div> <script src="/js/main.js"></script>