why is javascript showing html code instead of displaying content?

Question

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>

forget the DocType? forget extension `.html` to your file ? there can be a thousand other reasons — Mister Jojo, Sep 30 '21 at 01:07
Creating a text node does just that. It's text. You'll need innerHTML or create the elements and append. — Phix, Sep 30 '21 at 01:09

score 3 · Answer 1 · answered Sep 30 '21 at 01:14

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.

score 0 · Answer 2 · answered Sep 30 '21 at 01:52

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>

why is javascript showing html code instead of displaying content?

2 Answers2