JavaScript create span element inside div

Question

The following is the HTML that does what I want. It displays category: and beneath a value that I send in JavaScript.

<div id="category-order-id" class="additional-order-info">
   <!-- <span class="additional-order-info-grey">category:</span>
      Clothes -->
</div>

And here is my JavaScript

let orderCategory = document.getElementById("category-order-id");
orderCategory.textContent = `${order.category}`;
let categorySpan = document.createElement("span");
categorySpan.setAttribute("class", "additional-order-info-grey");
categorySpan.textContent = "category:";
orderCategory.appendChild(categorySpan);

What this code does, it that it first displays Clothes value that I send with JavaScript and beneath it display category.

Why I am creating a span element here is because if I set textContent of orderCategory it wil not display the span at all.

What am I doing wrong here?

It's not clear what your problem is here.

Pointy
– Pointy

2020-10-17 13:39:30 +00:00
Commented Oct 17, 2020 at 13:39 — Pointy
– Pointy, Commented Oct 17, 2020 at 13:39

Kurosaki_Ishigo · Accepted Answer · 2020-10-17 13:51:38Z

4

textContent property replaces all the content in the element. If you want to keep order.category and "category:" as content, you need to use the appendChild function:

let orderCategory = document.getElementById("category-order-id");
const catTextContent = document.createElement("span");
catTextContent.textContent = order.category;
let categorySpan = document.createElement("span");
categorySpan.setAttribute("class", "additional-order-info-grey");
categorySpan.textContent = "category:";
orderCategory.appendChild(catTextContent);
orderCategory.appendChild(categorySpan);

edited Oct 17, 2020 at 13:51

answered Oct 17, 2020 at 13:45

Kurosaki_Ishigo

861 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

JavaScript create span element inside div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related