why is javascript showing html code instead of displaying content?-CodePudding

i want javascript to display html content when button is clicked but it just shows code instead of the content what am i doing wrong?

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>

CodePudding user response：

The 'content' you have created is TEXT. The createTextNode can also used to escape HTML characters. You should create a button element by using something like createElement, append it to your DOM and set its TEXT value to what you want.

Have a look at this link to learn how to use createElement.

CodePudding user response：

The first problem is that you are running the function of ".click()", rather than using ".onclick()" or ".on('click', func..)". ".click()" literally clicks the element. The second problem is that you are creating a text node, then appending that text to the div.

Here is achieving what you want:

//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>