在javascript中更改文本节点值

Question

// Create element
const loi  = document.createElement('li');

// Add class
loi.className = 'collection-item';

// Add id
loi.id = 'new-item';

// Add attribute
loi.setAttribute('title', 'New Item');

// Create text node and append
loi.appendChild(document.createTextNode('Hello World'));

// Create new link element
const link = document.createElement('a');

// Add classes
link.className = 'delete-item secondary-content';

// Add icon HTML
link.innerHTML = '<i class="fa fa-remove"></i>';

// Append link into li
loi.appendChild(link);

// Append li as child to ul
document.querySelector('ul.collection').appendChild(loi);

console.log(loi);

这里当我想更新hello-world的文本节点时，通过编写loi.textContent="ghg";然后将hello世界更改为ghg，但我错过了那些锚标记，并标记了哪个我已经创建了除此之外的一切，我也附加了输出截图。

Answer 1

当您将文本节点插入li时，它就像您提到的li中的第一个孩子一样。您可以使用loi.childNodes[0]访问它，也可以使用只读属性loi.firstChild进行验证。

＆＃13;

＆＃13;

const loi  = document.createElement('li');

// Add class
loi.className = 'collection-item';

// Add id
loi.id = 'new-item';

// Add attribute
loi.setAttribute('title', 'New Item');

// Create text node and append
//const span = document.createElement("span");
//const text = document.createTextNode("Hello World");
//span.appendChild(text);
loi.appendChild(document.createTextNode("Hello World"));

// Create new link element
const link = document.createElement('a');

// Add classes
link.className = 'delete-item secondary-content';

// Add icon HTML
link.innerHTML = '<i class="fa fa-remove"></i>';

// Append link into li
loi.appendChild(link);

// Append li as child to ul
document.querySelector('ul.collection').appendChild(loi);

const newText = document.createTextNode("New World");

console.log(loi.childNodes[0]);
loi.childNodes[0].replaceWith(newText);
//OR   loi.replaceChild(newText, loi.childNodes[0]);

＆＃13;

<ul class="collection"></ul>

＆＃13;

＆＃13;

＆＃13;