Popular posts

This is quite basic stuff, I suggest brushing up at the mdn documentation.
jsfiddle.net/b1t67fdr/1

Hipkiss

The problem is that in your JSFIddle, it loads only the demo1 and the demo2 is not loaded. I changed to:

  document.getElementById("demo1").appendChild(node);
  document.getElementById("demo2").appendChild(node);

But demo1 is not loaded while demo2 is loaded. I want to load both them.

I changed to (I am not sure if it is bad practice):

for (let i = 0; i < length; i++)
{
  let node = document.createElement('div');
  node.className = 'palette';
  node.title = 'original';
  node.style = `background-color: ${colours[i]}`;
  node.textContent = `${i}`;

  let node2 = document.createElement('div');
  node2.className = 'palette';
  node2.title = 'telinkrin';
  node2.style = `background-color: ${colours[i]}`;
  node2.textContent = `${i}`

  document.getElementById("demo1").appendChild(node);
  document.getElementById("demo2").appendChild(node2);
}

Then it loaded both them. Here is: jsfiddle.net/gusbemacbe/2rpj0yng/10

Update

I had to move to, because of the tag container3 which used grid-template-columns:

    <h1>Original</h1>

    <div class="container3" id="demo1">
    </div>

    <h1>Telinkrin</h1>

    <div class="container3 telinkrin" id="demo2">
    </div>

Could do this: jsfiddle.net/o5y8mvuh

But I see what you mean - this is due to the way the browser handles attaching of elements to the DOM, There's only one copy of the new node and thus only gets attached to the second .appendChild thus a second new node is required. So two new nodes for two different appendChild locations.

Or a better method might be this:
jsfiddle.net/5szhkbtL

Hipkiss, very good solution as Sakal's, but as I wanted to use another array (titlenames), your codes are ideal, I did like, is it bad or good practice?

let titlenames = ["original", "telinkrin"];
let colours = ["#000", "#000009", "#0064A2", "#006575", "#0071F3", ...]
      function attachNewNode(target, colours, titlenames)
      {
          let length = colours.length;
          for (let i = 0; i < length; i++)
        {
          let node = document.createElement('div');
          node.className = 'palette';
          node.title = titlenames;
          node.style = `background-color: ${colours[i]}`;
          node.textContent = `${i}`;


          target.appendChild(node);
        }
      }
      attachNewNode(document.getElementById("demo1"), colours, titlenames[0]);
      attachNewNode(document.getElementById("demo2"), colours, titlenames[1]);

Well, in the particular section of code you have provided it wont work because the titlenames.length =/= colours.length; I would suggest either creating an array of objects let myArray = [{'color': '#123456', 'title': 'myTitle'}, ...] or having a check to ensure that the two array lengths are in fact equal (depending on what you wish to do with the titlenames).
Adding in titlenames as you have done, when it works, I wouldn't consider bad practise. But that would heavily depend on where the data comes from and why it the title and colour data couldn't be coupled like I have suggested above.

Hope this helps.

Hipkiss

I changed for (let i = 0; i < length; i++) to for (let i = 1; i <= length; i++) because I wanted 1 ... 850 and not 0 ... 849 for not getting confused with the line number of the text editor because I am colour-picking each of all these colours to copy to my text file. But with this code, the first colour was removed and the 850th colour was empty.

Yea, that's because you've moved the array along one position. so array[0] never gets called - this is your first colour. And array[850] is does not exist and therefore returns nothing. Change the for loop back to what it was and when you print out ${i} do the following instead ${i+1}.