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
– Mister Jojo, Commented Sep 30, 2021 at 1:07
Creating a text node does just that. It's text. You'll need innerHTML or create the elements and append. — Phix
– Phix, Commented Sep 30, 2021 at 1:09

Faith Baghan · Accepted Answer · 2021-09-30 01:14:36Z

3

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.

answered Sep 30, 2021 at 1:14

Faith Baghan

1311 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mstephen19 · Accepted Answer · 2021-09-30 01:52:44Z

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>

Collectives™ on Stack Overflow

why is javascript showing html code instead of displaying content?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related