Javascript 更改列表中的文本并保留属性

当

列表项1

更改为

Hello

时，

li

会释放所有其他属性。如何在不修改文本属性的情况下更改文本

const items=document.querySelectorAll（'li'））
项[0]。innerHTML='Hello'
console.log（项[0]）


清单项目1


清单项目2


清单项目3

innerText
是正确的属性，因此：

const items = document.querySelectorAll('li');
items[0].innerText = 'Hello';
console.log(items[0]);

innerText
是正确的属性，因此：

const items = document.querySelectorAll('li');
items[0].innerText = 'Hello';
console.log(items[0]);

我想我现在明白你的问题了。如果只想替换文本而不丢失链接，可以执行以下操作：


//获取页面上我们关心的元素。
const remove=document.querySelector（“a”）；
const listItem=document.querySelector（“li”）；
remove.addEventListener（“单击”，（）=>{
//替换列表项的内容。这包括
//锚定。
listItem.innerText=“：（”；
//将锚重新添加到列表项。
追加子项（删除）；
})；

快乐的日子
移除它
我想我现在明白你的问题了。如果你只想替换文本，而不丢失链接，你可以这样做：


//获取页面上我们关心的元素。
const remove=document.querySelector（“a”）；
const listItem=document.querySelector（“li”）；
remove.addEventListener（“单击”，（）=>{
//替换列表项的内容。这包括
//锚定。
listItem.innerText=“：（”；
//将锚重新添加到列表项。
追加子项（删除）；
})；

快乐的日子
移除它
如果您设置
innerHTML
或
innerText
您将替换该元素的所有内容。您的
元素包含您的文本和附加的
元素。因此，如果您在元素上设置
innerHTML
或
innerText
，则
元素也将被覆盖十个

如果可能，您可以将所有
元素的文本包装在
元素中

<li class="collection-item">
    <span>List Item 1</span>
    <a href="#" class="delete-item secondary-content">
        <i class="fa fa-remove"></i>
    </a>
</li> 

如注释中所述，如果要设置的文本包含角括号，则可能需要使用
innerText
，因为它们将被解释为HTML标记，而不是您可能不需要的纯文本

items[0].innerText = 'Hello'

如果您设置
innerHTML
或
innerText
您将替换该元素的所有内容。您的
元素包含您的文本和附加的
元素。因此，如果您在元素上设置
innerHTML
或
innerText
，则
元素也将被覆盖

如果可能，您可以将所有
元素的文本包装在
元素中

<li class="collection-item">
    <span>List Item 1</span>
    <a href="#" class="delete-item secondary-content">
        <i class="fa fa-remove"></i>
    </a>
</li> 

如注释中所述，如果要设置的文本包含角括号，则可能需要使用
innerText
，因为它们将被解释为HTML标记，而不是您可能不需要的纯文本

items[0].innerText = 'Hello'

设置innerText而不是innerHTML。@CharlesBamford不幸地
与
innerHTML或
innerText
一起丢失。无论如何，谢谢您设置innerText而不是innerHTML。@CharlesBamford不幸地
与
innerText
一起丢失。谢谢您