Javascript 使用multi-clamp.js从reddit API截断标题

我正试图使用（来钳制/截断从RedditAPI返回的标题

但是，它只对第一个重新调整的标题起作用，而不是对所有标题起作用。我如何确保函数在api返回的所有标题上运行，而不仅仅是第一个标题

const reddit = "https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"

async function getData() {
    try {
        let response = await fetch(reddit);
        let data = await response.json()
        return data;
    } catch (error) {
        console.log("error", error);
    }
}

getData()
    .then(data => data.data.children)
    .then(data => data.map(post => ({
        source: post.data.domain,
        author: post.data.author,
        link: post.data.url,
        img: (typeof (post.data.preview) !== 'undefined') ? post.data.preview.images[0].source.url : null,
        title: post.data.title,
    })))
    .then(data => data.map(render))

const app = document.querySelector('#app');

const render = post => {
    //console.log(post.data);
    const node = document.createElement('div');
    node.classList.add('news-item', `news-item--${ post.class }`);
    node.innerHTML = `
    <a class="news-item-link" href="${post.link}">
        <div style="background-image: url('${post.img}')" class="news-item-bg"></div>
        <div class="news-item-content">
            <h3 class="news-item-source">${post.source}</h3>
            <h2 class="news-item-title mb-2">${post.title}</h2>
        </div>
    </a>`;
    app.appendChild(node);

    new MultiClamp(document.querySelector('.news-item-title'), {
        ellipsis: '...',
        clamp: 2
    });
}

const reddit=”https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"
异步函数getData（）{
试一试{
let response=等待获取（reddit）；
let data=wait response.json（）
返回数据；
}捕获（错误）{
console.log（“错误”，error）；
}
}
getData（）
.then（data=>data.data.children）
.then（data=>data.map（post=>({
来源：post.data.domain，
作者：post.data.author，
链接：post.data.url，
img：（typeof（post.data.preview）！='undefined'）？post.data.preview.images[0]。source.url:null，
标题：post.data.title，
})))
.then（data=>data.map（渲染））
const app=document.querySelector（“#app”）；
const render=post=>{
//控制台日志（post.data）；
const node=document.createElement（'div'）；
add（'news-item'，'news item--${post.class}`）；
node.innerHTML=`
`;
app.appendChild（节点）；
新的MultiClamp（document.querySelector（“.news item title”）{
省略号：“…”，
夹钳：2
});
}

new MultiClamp..

是在标题选择器上执行钳制操作的地方，但它仅钳制第一个返回的标题，而不是所有标题

---

如何使其在所有标题上运行？

文档。querySelector

仅返回与选择器匹配的第一个元素。由于您在整个

文档上执行它，因此它将始终获得附加到文档的第一个标题，并在其上创建许多新的
多个标题

相反，您需要在新节点中选择一个新标题元素：

function render(post) {
    const node = document.createElement('div');
    node.classList.add('news-item', `news-item--${ post.class }`);
    node.innerHTML = `
    <a class="news-item-link" href="${post.link}">
        <div style="background-image: url('${post.img}')" class="news-item-bg"></div>
        <div class="news-item-content">
            <h3 class="news-item-source">${post.source}</h3>
            <h2 class="news-item-title mb-2">${post.title}</h2>
        </div>
    </a>`;
    app.appendChild(node);

    new MultiClamp(node.querySelector('.news-item-title'), {
//                 ^^^^
        ellipsis: '...',
        clamp: 2
    });
}

函数渲染（post）{
const node=document.createElement（'div'）；
add（'news-item'，'news item--${post.class}`）；
node.innerHTML=`
`;
app.appendChild（节点）；
新的MultiClamp（node.querySelector（“.news item title”）{
//                 ^^^^
省略号：“…”，
夹钳：2
});
}

顺便说一句，使用
innerHTML
和未设场景的插值值可以打开应用程序进行XSS攻击。最好也使用DOM API来构建整个节点内容。
谢谢！感谢您对XSS攻击的提醒。有没有更好的方法来呈现数据？我不确定您的意思是什么“还可以使用DOM API构建整个节点内容"我的意思是不要使用
innerHTML
，而只使用
document.createElement
和
appendChild
。对于文本内容，请使用您附加的
document.createTextNode
，或者
node.textContent
。谢谢你！感谢你的帮助。这让我找到了
createDocumentFragment
，我现在已经对它进行了重构.