append()不解析标签

懒散de虫

已于 2024-03-02 23:08:18 修改

阅读量328

点赞数 5

文章标签： javascript html5 前端

于 2024-03-02 20:34:10 首次发布

本文链接：https://blog.csdn.net/weixin_73062000/article/details/136421763

版权

<!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>

错误图示：