CSS is inactive for dynamically created html


I would like a treeview that users can update (add, delete, and rename nodes), but I ran into an issue.

I’m starting from the process described here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_treeview. You can see how I’m trying to update a node here: https://jsfiddle.net/mervius68/4of5ung0/2/. If I replace the outerHTML of an element using Javascript, the class inside that text (necessary for opening and closing tree nodes) is no longer recognized. How do I get the CSS to apply to the Javascript-created HTML? The node called "Tea" gets successfully renamed to "BEAR," but is then no longer able to toggle between collapsed and open.

I can get this to work when just changing the innerHTML, but I need to add entire new nodes, so I think I need to get the outerHTML option working. Please help?

  <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

span.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

span.caret::before {
  content: "B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

span.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}

.nested {
  display: none;
}

.active {
  display: block;
}
</style>
</head>
<body>

<h2>Tree View</h2>
<p>A tree view represents a hierarchical view of information, where each item can have a number of subitems.</p>
<p>Click on the arrow(s) to open or close the tree branches.</p>

<ul id="myUL">
  <li><span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li><span id="test" class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li>Green Tea</li>
        </ul>
      </li>  
    </ul>
  </li>
</ul>
<button onclick="myFunction()">Click me</button>

<script>
    function myFunction() {    
        document.getElementById("test").outerHTML =  `<li><span id="test2" 
              class="caret">BEAR</span>
              <ul class="nested">
              <li>Black Tea</li>
              <li>White Tea</li>
              <li>Green Tea</li>
              </ul>
              </li>`
    }
</script>

<script>
     var toggler = document.getElementsByClassName("caret");
     var i;
     for (i = 0; i < toggler.length; i++) {
         toggler[i].addEventListener("click", function() {
         this.parentElement.querySelector(".nested").classList.toggle("active");
         this.classList.toggle("caret-down");
  });
}
</script>

</body>
</html>

Source: CSS – Stack Overflow

September 17, 2021
Category : News
Tags: css | html | javascript | outerhtml | treeview

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.