如何使用带有 createTextNode() 的列表的第一个子项

Posted 2023-05-07

【中文标题】如何使用带有 createTextNode() 的列表的第一个子项

【英文标题】：How do I use the first child of a list with createTextNode()

【发布时间】：2018-10-05 19:24:03

【问题描述】：

我正在尝试使用 js 使用 createTextNode() 打印列表的第一个子项并创建一个 h1。我想让我的句子读成“蓝色？很棒的颜色”。但是，我的句子是读[object] [object]？伟大的颜色。如何正确使用列表的第一个孩子？ https://jsfiddle.net/6x9a6rqv/

html:

<div class="list">
  <ul>
    <li><a href="#">Blue</a></li>
    <li><a href="#">Red</a></li>
    <li><a href="#">Green</a></li>
  </ul>
</div>

css:

.list li:first-child 
  font-size: 30px;

JS：

var colour = $('.list li:first-child')

var headerone = document.createElement("H1");
var t = document.createTextNode(colour + '? Great Colour.');
headerone.appendChild(t);
document.body.appendChild(headerone);

任何帮助将不胜感激:)

【参考方案1】：

在colour 变量中，您有一个对 DOM 对象的引用。要获取其文本，请使用text() 方法：

document.createTextNode(colour.text() + '? Great Colour.')