CSS - JavaScript Not Being Implemented-CodePudding

I fetched an html file using fetch api and took the div components and embedded them into another html file. The css is not being applied after the process is complete. Nor is the javascript file being called. I checked the file paths and they are correct. Does the css and javascript tags not transfer over when they are fetched using the fetch api?

***Main script.js***
let testSide = document.querySelector('#test-sidebar')


let htmlUrl = './TextBox/index.html'


fetch(htmlUrl)
  .then((result)=>{
    return result.text()
  }).then((html)=>{
    var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html')
    var doDo = doc.querySelector('.parent-container')
    testSide.appendChild(doDo)
  }).catch((error)=>{
    console.log(error)
  })

***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>To Do</title>
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
  <link rel="stylesheet" href='style.css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="test-sidebar">
  </div>
  <script src="script.js"></script>
</body>
</html>

***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Notbox</title>
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
        
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" ></textarea>

        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>
    <script src="script.js"></script>
  </body>
</html>

***CSS of second html file***
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body{
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
  position: relative;
  width: 100%;
  height: 540px;
  max-height: 5400px;
}

/*------------------------container-----------------------*/
.container{
  position: absolute;
  top: 0;
  left: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;
}



/*--------------------------header-----------------------*/
.header{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;

}


/*---------------------------content------------------------*/

.content{
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;
}


.content::-webkit-scrollbar{
  display: none;
}

.content ul{
  padding: 0;
  margin: 0;
}

.items-content{
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid #D6DBDF;
}

.item{
  position: relative;
  border-bottom: 1px solid #EBEDEF;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  cursor: pointer
}

.item:hover{
  background-color: #EAECEE
}


.item p{
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;
}


/*--------------------------Create Text Box--------------------------*/
.create-text-box{
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer
}



/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
  position: absolute;
  top: 0;
  right: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;
}



/*--------------------------header-----------------------*/
.notebox-container .header{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;

}



/*---------------------------content------------------------*/

.notebox-container .content{
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;
}

#noteList
{
  resize: none;
  font-size: 15px;
  font: serif;
    color: #28B463;
    text-align: center;
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;
}


.notebox-container .content::-webkit-scrollbar{
  display: none;
}

.notebox-container .content ul{
  padding: 0;
  margin: 0;
}

.notebox-container .items-content{
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid white;
}

.notebox-container .item{
  position: relative;
  border-bottom: 1px solid white;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
}


.notebox-container .item p{
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}


/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer
}


.notebox-container #remove{
  color: #28B463;
}

CodePudding user response：

Load .css from Main Html file will work fine.
var doDo = doc.querySelector('.parent-container') here you load only parent-container div element. No css found on here. so if you want to load css from Second Html file then you should write/load css and javascript inner side of parent-container div. ex:

  <div class="parent-container">
      <link rel="stylesheet" href='style.css'> <!---change here[2]------>
          --------
         -------

If you try this on local machine you may face this error

Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.

Try in on Localhost or on an online server. you may not found this problem.

Main HTML File

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="test-sidebar">
    </div>
    <script>
        let testSide = document.querySelector('#test-sidebar');
        let htmlUrl = 'index.html';
        fetch(htmlUrl)
            .then((result) => {
                return result.text()
            }).then((html) => {
                var parser = new DOMParser();
                var doc = parser.parseFromString(html, 'text/html')

                var doDo = doc.querySelector('.parent-container')
                console.log('doc', doDo)
                testSide.appendChild(doDo)
            }).catch((error) => {
                console.log(error)
            })
    </script>
     <link rel="stylesheet" href='style.css'> //change here[1]
</body>

</html>

Second Html File

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Notbox</title>
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
        
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" ></textarea>

        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>

  </body>
</html>

CSS of Main html file

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        body {
            position: relative;
            width: 100%;
            height: 100vh;
            font-family: 'Titillium Web', sans-serif;
        }

        /*------------------------container-----------------------*/
        .parent-container {
            position: relative;
            width: 100%;
            height: 540px;
            max-height: 5400px;
        }

        /*------------------------container-----------------------*/
        .container {
            position: absolute;
            top: 0;
            left: 10px;
            width: 400px;
            margin: 0 auto;
            box-shadow: 5px 5px 8px rgb(171, 178, 185);
            border-radius: 15px 15px 0 0;
        }



        /*--------------------------header-----------------------*/
        .header {
            position: relative;
            width: 100%;
            height: 150px;
            background-color: #2E86C1;
            border-radius: 15px 15px 0 0;

        }


        /*---------------------------content------------------------*/

        .content {
            position: relative;
            width: 100%;
            height: 390px;
            max-height: 390px;
            background-color: #EAEDED;
            overflow: hidden;
        }


        .content::-webkit-scrollbar {
            display: none;
        }

        .content ul {
            padding: 0;
            margin: 0;
        }

        .items-content {
            position: relative;
            width: 100%;
            height: calc(100% - 35px);
            max-height: calc(100% - 35px);
            overflow: auto;
            border-bottom: 1px solid #D6DBDF;
        }

        .item {
            position: relative;
            border-bottom: 1px solid #EBEDEF;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 45px;
            min-height: 45px;
            background-color: white;
            display: flex;
            align-items: center;
            cursor: pointer
        }

        .item:hover {
            background-color: #EAECEE
        }


        .item p {
            position: absolute;
            padding-left: 35px;
            height: 45px;
            line-height: 45px;
            width: 100%;
            white-space: nowrap;
        }


        /*--------------------------Create Text Box--------------------------*/
        .create-text-box {
            position: absolute;
            border: none;
            outline: none;
            width: 100%;
            height: 35px;
            bottom: 0;
            left: 0;
            background-color: #21618C;
            color: white;
            cursor: pointer
        }



        /*For note box*/
        /*------------------------notbox container-----------------------*/
        .notebox-container {
            position: absolute;
            top: 0;
            right: 10px;
            width: 400px;
            margin: 0 auto;
            box-shadow: 5px 5px 8px rgb(171, 178, 185);
            border-radius: 15px 15px 0 0;
        }



        /*--------------------------header-----------------------*/
        .notebox-container .header {
            position: relative;
            width: 100%;
            height: 150px;
            background-color: #2E86C1;
            border-radius: 15px 15px 0 0;

        }



        /*---------------------------content------------------------*/

        .notebox-container .content {
            position: relative;
            width: 100%;
            height: 390px;
            max-height: 390px;
            background-color: #EAEDED;
            overflow: hidden;
        }

        #noteList {
            resize: none;
            font-size: 15px;
            font: serif;
            color: #28B463;
            text-align: center;
            /*font-weight: bold;*/
            border: none;
            height: calc(100% - 35px);
            width: 100%;
        }


        .notebox-container .content::-webkit-scrollbar {
            display: none;
        }

        .notebox-container .content ul {
            padding: 0;
            margin: 0;
        }

        .notebox-container .items-content {
            position: relative;
            width: 100%;
            height: calc(100% - 35px);
            max-height: calc(100% - 35px);
            overflow: auto;
            border-bottom: 1px solid white;
        }

        .notebox-container .item {
            position: relative;
            border-bottom: 1px solid white;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 45px;
            min-height: 45px;
            background-color: white;
            display: flex;
            align-items: center;
        }


        .notebox-container .item p {
            position: absolute;
            padding-left: 35px;
            height: 45px;
            line-height: 45px;
            width: 100%;
            white-space: nowrap;
            text-align: center;
        }


        /*--------------------------Create Text Box--------------------------*/
        .notebox-container .copy-text {
            position: absolute;
            border: none;
            outline: none;
            width: 100%;
            height: 35px;
            bottom: 0;
            left: 0;
            background-color: #21618C;
            color: white;
            cursor: pointer
        }


        .notebox-container #remove {
            color: #28B463;
        }

CodePudding user response：

Try replacing your fetch code with this:

fetch(htmlUrl)
.then((result)=>{
  return result.text()
})
.then((html)=>{
 var doc = document.createRange().createContextualFragment(template);
 testSide.appendChild(doc);
}).catch((error)=>{
  console.log(error)
})

createContextualFragment renders the Second Html File and load all its scripts