CSS 对于动态创建的 html 无效

Question

我想要一个用户可以更新（添加、删除和重命名节点）的树视图，但我运行遇到了问题。

我从这里描述的过程开始：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/。如果我使用 Javascript 替换元素的外部 HTML，则不再识别该文本中的 class（打开和关闭树节点所必需的）。如何让 CSS 应用于 Javascript 创建的 HTML？名为“Tea”的节点已成功重命名为“BEAR”，但随后无法再在折叠和打开之间切换。

只要更改内部 HTML，我就可以让它工作，但我需要添加整个新节点，所以我想我需要让外部 HTML 选项工作。请帮忙？

  <!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>

Answer 1

问题不在于 class 未被识别。正如 @A Haworth 在评论中提到的那样，问题是您没有将任何事件侦听器附加到新创建的元素。您拥有的将事件侦听器附加到所有 caret class 的脚本仅在加载时运行一次。之后，如果您要创建新元素，则必须将新的事件侦听器附加到这个新元素。

<!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>`
        document.getElementById("test2").addEventListener("click", function() {
     this.parentElement.querySelector(".nested").classList.toggle("active");
     this.classList.toggle("caret-down");
        });
    }
</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>

CSS 对于动态创建的 html 无效

CSS is inactive for dynamically created html

html

javascript

css

treeview

outerhtml