Quiero que javascript muestre el contenido html cuando se hace clic en el botón, pero solo muestra el código en lugar del contenido. ¿Qué estoy haciendo mal?
let btn = $('button'); let socials = $("#popup"); let theDiv = document.getElementById("btnclick"); let content = document.createTextNode('<button class="circle"><img class="share" src="images/icon-share.svg"></button>'); btn.click(function() { socials.toggle(); theDiv.appendChild(content); }); #popup { position: absolute; z-index: 5 !important; top: 160px; background-color: red; width: 235px; height: 55px; border-radius: 10px; } .circle { z-index: 1; position: absolute; float: right; background: hsl(210, 46%, 95%); border-radius: 50%; height: 30px; width: 30px; margin: 0; right: 0px; bottom: 58px; left: 352px; } <div id="popup" class="window"> <div class="windowtext">SHARE <img class="icons iconfirst" src="images/icon-facebook.svg" /> <img class="icons" src="images/icon-twitter.svg" /> <img class="icons" src="images/icon-pinterest.svg" /> <div id="btnclick"></div> </div> <span class="triangle"></span> </div> </div> <button class="circle"><img class="share" src="images/icon-share.svg"></button>El 'contenido' que ha creado es TEXTO. El createTextNode también se puede usar para escapar de los caracteres HTML. Debe crear un elemento de botón usando algo como createElement, agréguelo a su DOM y establezca su valor de TEXTO en lo que desee.
Echa un vistazo a este enlace para aprender a usar createElement.
El primer problema es que está ejecutando la función ".click()", en lugar de usar ".onclick()" o ".on('click', func..)". ".click()" literalmente hace clic en el elemento. El segundo problema es que está creando un nodo de texto y luego agregando ese texto al div.
Aquí está logrando lo que quieres:
//button to be clicked let btn = $('#demo'); //create new button tag with class circle var newBtn = $('<button>').addClass('circle'); //create new img tag with class share and src of the image var newImgTag = $('<img>').addClass('share').attr('src', 'https://i.pinimg.com/474x/aa/91/2d/aa912de6d6fe70b5ccd0c8b9fc7a4f26--cartoon-dog-cartoon-images.jpg') //append the img tag to the newBtn newImgTag.appendTo(newBtn); //on click of the btn, the new button will be appended to the div and available on the DOM btn.on('click', function(){ $('#demoDiv').append(newBtn) }); <button id="demo">Click for puppy</button> <div id="demoDiv" style="position: fixed; top: 50px; left: 0px;"></div>