このインターフェイスはニュース データを取得してレンダリングし、返された HTML 内の各 div の a タグに文字列を接続して説明します。

const newList = document.getElementById('newList');
    axios.get('https://xxx').then(res => {//返回html数据
        console.log(res.data, 'res.data')
        const newListString = res.data
        const parser = new DOMParser() //引入DOMParser
        const doc = parser.parseFromString(newListString, 'text/html') //使用DOMParser将newListString的html数据变成dom
        console.log(doc, 'doc')
        const herfQueryAdd = 'xxxxx=niudan' // a标签拼接的字符串
        const aTags = doc.getElementsByTagName('a') // 获取a标签
        for (let i = 0; i < aTags.length; i++) { // 将a标签数组进行遍历
            const href = aTags[i].href
            // aTags[i].href = href + herfQueryAdd; 如果你想要设置一个自定义的属性，那么就必须使用 setAttribute 方法，因为使用点表示法或方括号语法来设置未知的属性会被视为添加一个新的 DOM 属性，而不是添加一个 HTML 属性。
            aTags[i].setAttribute('href', href + herfQueryAdd)
            console.log(aTags[i].href, 'aTags[i].href')
        }
        newList.innerHTML = `<span class="taTitle">推荐阅读</span>` + doc.documentElement.outerHTML
    }
    ）
    const style = document.createElement("style"); 创建style
    style.innerHTML = `.taTitle { // 设置上面请求回来的html数据的相应样式
                display: block;
                border-top: 2px solid rgba(250, 250, 250, 0.36);
                height: 35px;
                line-height: 35px;
                font-family: PingFangSC-Regular, '微软雅黑';
                font-size: 16px;
                text-align: center;
                color: #333;
                margin-bottom: 14px;
            }
            .articleRecommendation_con{
                clear: both;
                margin: 6px 0px;
                overflow: hidden;
            }
            .articleRecommendation_con a:nth-child(1) {
                float: left;
                width: 28%;
                height: 66px;
                padding: 5px 0px;
            }
            .articleRecommendation_con a:link {
                text-decoration: none;
                color: #333;
            }
            .articleRecommendation_con a:nth-child(1) img {
                width: 92%;
            }
            .articleRecommendation_con img {
                overflow-clip-margin: content-box;
                overflow: clip;
            }
            .articleRecommendation_con a:nth-child(2) {
                display: block;
                width: 72%;
                float: left;
            }
            .articleRecommendation_con_right p:nth-child(1) {
                display: none;
            }
            .articleRecommendation_con p {
                display: block;
                margin-block-start: 1em;
                margin-block-end: 1em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
            }
            .articleRecommendation_con_right p:nth-child(2) {
                margin: 0px;
                line-height: 22px;
                word-wrap: break-word;
                text-align: left;
                font-size: 14px;
            }

            .articleRecommendation_con_right p:nth-child(3) {
                margin: 0px;
                line-height: 20px;
                word-wrap: break-word;
                text-align: left;
            }
            .articleRecommendation_con_right p:nth-child(3) span:nth-child(1) {
                display: none;
            }
            .articleRecommendation_con_right p:nth-child(3) span:nth-child(2) {
                color: #333;
                line-height: 20px;
                font-family: PingFangSC-Regular, '微软雅黑';
                font-size: 12px;
                text-align: left;
            }`;
    document.head.appendChild(style);

これにより、返された HTML とスタイルが完全にレンダリングされます。