ES6字符串模板

最新推荐文章于 2024-08-18 13:05:25 发布

我是打工人

最新推荐文章于 2024-08-18 13:05:25 发布

阅读量208

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/szydqq/article/details/125812170

版权

ES6 字符串模板动态生成 li元素 innerHTML

关键词由CSDN通过智能技术生成

①字符串创建的方式

<body>
    <ul>
    </ul>
</body>
<script>
    let oUl= document.querySelector("ul");
    //ES6的字符串模板
    //被``包含的字符序列也是字符串
 //反引号支持换行，常用于页面的拼接
    //     oUl.innerHTML = `
    //     <li class='test'>111</li>
    //     <li>222</li>
    //     <li>333</li> 
    // `;
// let oLis = document.getElementsByTagName("li");

    // console.log(oLis);

    for(let i=0; i<10; i++){
        //ES6字符串模板中出现变量必须用${变量}
        oUl.innerHTML += `<li>${i}</li>`
    }
</script>