接口获取新闻数据渲染而且在返回的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和样式