如何使用createTextNode()列表的第一个子节点

时间:2018-04-25 10:41:42

标签: javascript css-selectors createtextnode

我尝试使用js使用createTextNode()打印列表的第一个子节点并创建一个h1。我想把我的句子读成"蓝色?很棒的颜色。"但是,我的句子是[对象] [对象]?很棒的颜色。如何正确使用列表中的第一个孩子? 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 个答案:

答案 0 :(得分:3)

colour变量中,您有对DOM对象的引用。要获取其文本,请使用text()方法:

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