am trying to incorporate javascript into my html, the first method works perfect,but the second dosent work at all, but why?

Question

am trying to incorporate simplebar into my html, the first method works perfect,but the second dosent work at all, but why? I think they are the same code.

<script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>
<link href="https://unpkg.com/simplebar@latest/dist/simplebar.min.css" rel="stylesheet" />
<div data-simplebar style="background-color: rgb(160, 158, 158); width: 400px; height: 150px;">
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
</div>

As below, am using javascript to add attributes and values to the original html code, by using the Chrome inspect mode, u can see the second method doesnt work.

function myFunction() {
  document.getElementsByTagName("div")[0].setAttribute("data-simplebar", "init");
  let a = document.createElement('link'),
    doc;
  a.setAttribute("rel", "stylesheet");
  a.setAttribute("href", "https://unpkg.com/simplebar@latest/dist/simplebar.min.css");
  doc = document.head;
  doc.appendChild(a);
  let b = document.createElement('script'),
    dod;
  b.setAttribute("src", "https://unpkg.com/simplebar@latest/dist/simplebar.js");
  dod = document.body;
  dod.appendChild(b);
}
myFunction();

<div style="background-color: rgb(160, 158, 158); width: 400px; height: 150px;">
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
</div>

Answer 1

The code is not exactly the same.

In the second example you are setting data-simplebar on the first div to have value "init".

But in your first snippet the data-simplebar is empty.

This snippet is your second one with the init replaced with nothing in the JS.

The result seems now to be the same as your first snippet.

function myFunction() {
  document.getElementsByTagName("div")[0].setAttribute("data-simplebar", "");
  let a = document.createElement('link'),
    doc;
  a.setAttribute("rel", "stylesheet");
  a.setAttribute("href", "https://unpkg.com/simplebar@latest/dist/simplebar.min.css");
  doc = document.head;
  doc.appendChild(a);
  let b = document.createElement('script'),
    dod;
  b.setAttribute("src", "https://unpkg.com/simplebar@latest/dist/simplebar.js");
  dod = document.body;
  dod.appendChild(b);
}
myFunction();

<div style="background-color: rgb(160, 158, 158); width: 400px; height: 150px;">
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
  <p>My first paragraph.</p>
</div>