对富文本html片段做处理对＜p＞标签添加点击事件

// 假设的 HTML 字符串
const recommendationsHTML = `
    未查询到相关内容，您可询问其他问题
    <div id="recommendations" style="font-size: small; color: blue; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 22001;">
        <p>预生产计划</p>
        <!-- 可以在这里添加更多的 <p> 元素 -->
    </div>
`;

// 使用 createContextualFragment 安全地创建 DOM 节点
const fragment = document.createRange().createContextualFragment(recommendationsHTML);

// 获取所有带有 markdown-body 类的 article 元素
const allMarkdownBodies = document.querySelectorAll('.bubble .markdown-body');
// 如果存在多个这样的元素，选择最后一个（即最新添加的）
const latestMarkdownBody = allMarkdownBodies.length > 0 ? allMarkdownBodies[allMarkdownBodies.length - 1] : null;

if (latestMarkdownBody) {
    // 清空最后一个 .markdown-body 的内容
    latestMarkdownBody.innerHTML = '';

    // 获取所有 <p> 元素
    const paragraphs = fragment.querySelectorAll('p');

    // 为每个 <p> 元素添加点击事件处理器
    paragraphs.forEach(paragraph => {
        paragraph.onclick = () => {
            document.getElementById('messageInput').value = paragraph.textContent;
        };
    });

    // 替换最后一个 .markdown-body 的内容
    latestMarkdownBody.appendChild(fragment);
}