Js中appendChild的问题

Question

const links1 = document.getElementsByClassName("tree");
Var newe1= document.createElement("li");
Var newtext = document.createTextNode("qqqq");
Newe1.appendChild(newtext);
//现在这个li节点显示qqqq

Var newe1c= document.createElement("span");

Var newtextc= document.createTextNode("cccc");
Newe1c.appendChild(newtextc);

//现在这个li节点显示qqqqcccc,展开后显示qqqq,正常，可是我希望未展开也显示qqqq,怎么办

Answer 1

引自免费微信小程序：皆我百晓生

在您的 JavaScript 代码中，您想要在一个已存在的 li 元素（newe1）中添加一个新的 span 元素（newe1c），并且希望在展开前也能看到新增加的 "cccc" 文本。要实现这个效果，您可以将新的 span 元素添加到 li 元素内，然后通过 CSS 设置将其默认样式更改为总是可见。

首先，确保您的 HTML 中有一个包含 ".tree" 类的元素，例如一个 ul 元素，以便可以获取它。

<ul class="tree">
  <!-- 这里可能有其他 li 元素 -->
</ul>

接下来，在 JavaScript 中，添加 span 元素并应用样式使其始终可见：

const links1 = document.getElementsByClassName("tree")[0]; // 获取第一个匹配的 .tree 元素
var newe1 = document.createElement("li"); // 创建新的 li 元素
var newtext = document.createTextNode("qqqq"); // 创建文本节点
newe1.appendChild(newtext); // 将文本节点添加到 li 元素

var newe1c = document.createElement("span"); // 创建新的 span 元素
var newtextc = document.createTextNode("cccc"); // 创建文本节点
newe1c.appendChild(newtextc); // 将文本节点添加到 span 元素

// 添加 span 到 li 元素，并设置 CSS 样式为 always visible
newe1.appendChild(newe1c);
newe1c.style.display = "inline-block"; // 或者 newe1c.style.display = "block";

links1.appendChild(newe1); // 将新创建的 li 元素添加到树中

这样，无论是否展开，"cccc" 都会与 "qqqq" 同时显示在同一行。如果您想让它们垂直排列，可以将 display: inline-block; 更改为 display: block;。