时间戳

首页 > 解决方案 > 按属性选择，相应地设置innerHTML

javascript - 按属性选择，相应地设置innerHTML

问题描述

如何innerHTML在纯javascript中按属性选择并相应地设置结果？

const texts = [
    {id: 'id01', text='Content 01'},
    {id: 'id02', text='Content 02'}
]

<div data-my-id="id01"></div>
<div data-my-id="id02"></div>

最终结果应该是：

<div data-my-id="id01">Content 01</div>
<div data-my-id="id02">Content 02</div>

编辑：忘了提：循环数组效率不高，因为有数百（也许数千）个项目。有什么方法可以遍历 querySelector 结果并相应地设置文本？

标签： javascripthtmlarraysattributes

解决方案

您可以使用该函数forEach来循环数组，并使用该函数querySelector([data-my-id="specific id"])来选择元素并设置所需的文本。

请改用该属性textContent，因为您只需要设置一个文本

const texts = [
    {id: 'id01', text:'Content 01'},
    {id: 'id02', text:'Content 02'}
]

texts.forEach(({id, text}) => document.querySelector(`[data-my-id="${id}"]`).textContent=text);
<div data-my-id="id01"></div>
<div data-my-id="id02"></div>

推荐阅读