<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<ul id="ul_supplier">
<li id="li_supplier1">
<button id="btn_add" onclick="add()">增加</button>
<span id="text_inp_supplier1">供应商1名称:</span>
<input id="inp_supplier1" type="text" placeholder="" />
</li>
</ul>
</div>
<script>
// var li_supplier = document.getElementById("li_supplier1")
var ul_supplier = document.getElementById("ul_supplier")
var i = 1;
function add() {
i++
var liId = "li_supplier" + i
var spanId = "text_inp_supplier" + i
var inputId = "inp_supplier" + i
var content = '<span id="' + spanId + '">' + '供应商' + i + '名称:</span>' + '<input id="' + inputId + '" type="text" />'
//错误写法
// ul_supplier.append(content)
// 正确写法
var li_supplier = document.createElement("li")
li_supplier.id = liId
li_supplier.innerHTML = content
ul_supplier.appendChild(li_supplier)
}
</script>
</body>
</html>
错误图示:
正确图示: