1.知识点(追加字符串,与后端联系)
- 模板字符串:使用 tab 键上面的的反引号 `
- 插入变量时:使用 ${ 变量名 }
2.代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6案例--模板字符串</title>
</head>
<body>
<div class="box">
</div>
<script>
const oBox = document.querySelector('.box')
let id = 1,
name = '小明';
//ES6写法
let htmlStr = `<ul>
<li>
<p id = ${id} > ${name} </p>
</li>
</ul>`
oBox.innerHTML = htmlStr;
// ES6 以前的写法
// oBox.innerHTML = "<ul><li><p id =" + id + ">" + name + "</p></li></ul>"
</script>
</body>
</html>