What is the proper method to append elements in elements in javascript-CodePudding

I am using vanilla javascript for my tiny weather project.

I have a problem with appending elements(which are created in run-time) in element. Following HTML structure is my goal structure.

<div>
  Min Temp <span > °C </span>
  Max Temp <span > °C </span>
</div>

const div = document.createElement('div');
const span = document.createElement('span');
div.append("Min Temp", span, "Max Temp", span);

and my result is this:

<div>
  Min Temp
  Max Temp <span > °C </span>
</div>

I think the problem occurs when element.append() method get duplicated reference. But I can't find the docs explain about it. It's stack overflow at my brain!!!

Thanks for reading my question and have a nice day :)

CodePudding user response：

It seems that the issue is that you are using the same span element for both occurrences of that span. If you want to have a separate span for each, you would most likely need to create 2 spans, 1 for each temperature.

Here is a code example you might be able to use:

const div = document.createElement('div');
const span1 = document.createElement('span');
const span2 = document.createElement('span');
div.append("Min Temp", span1, "Max Temp", span2);

CodePudding user response：

Maybe if you want to sort the spans according to the div textContent (Min/ Max Temp) you could have a workaround with two individual divs like that:

const div1 = document.createElement("div"); 
div1.textContent = "Min Temp"; 
const span = document.createElement("span"); 
span.classList.add("small-font"); 
span.textContent = "C°"; 
div1.append("span"); 
const div2 = document.createElement("div"); 
div2.textContent = "Max Temp"; 
div2.append("span");