附加对象而不是 html

Posted 2023-05-09

【中文标题】附加对象而不是 html

【英文标题】：Appending objects instead of html

【发布时间】：2021-11-09 19:09:03

【问题描述】：

我试图在鼠标单击时插入一些引导元素，但它似乎插入了[object Object]，猜猜我错在哪里，提前谢谢

Jquery sn-p

// adding skills container
let addSkillsContainer = () =>
  
    let div_contain =$("<div></div")
    div_contain.addClass("col-md-5")
    div_contain.append(
        $("<div></div").addClass("form-group input-group").append(
            $("<input>").attr("type","text").addClass("form-control")
        )
    )

    let main_container = $(".main-contain")[0]
    main_container.append(div_contain)



// event for calling skills add function
$(add).on('click', function (e) 
    e.preventDefault()

    addSkillsContainer()
    console.log('clicked')
    
);

html 输出

[object Object][object Object][object Object][object Object][object Object][object Object]

【参考方案1】：

这部分代码有问题

let main_container = $(".main-contain")[0]
    main_container.append(div_contain)

在 jQuery 中，如果你访问 like 数组，它会返回 html dom 对象。

改成

let main_container = $(".main-contain").eq(0)
        main_container.append(div_contain)

【讨论】：

效果很好，但在$(".main-contain")[0] 和$(".main-contain").eq(0) 之间存在差异？

$(".main-contain").eq(0) 返回 jQuery 对象，但 $(".main-contain")[0] 返回 html dom 元素对象。 html element append function 和 jquery append function

【参考方案2】：

试试这个

let addSkillsContainer = () =>
    const div_contain =`
        <div class='col-md-5'>
            <div class="form-group input-group">
                <input type="text" class="form-control">
            </div>
        </div>
    `;

    $(".main-contain")[0].innerHTML +=div_contain;

$("#add").on('click', function (e) 
    e.preventDefault()

    addSkillsContainer();
    
);

let addSkillsContainer = () =>
    const div_contain =`
        <div class='col-md-5'>
            <div class="form-group input-group">
                <input type="text" class="form-control">
            </div>
        </div>
    `;

    $(".main-contain")[0].innerHTML +=div_contain;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="add">Add</button>

<div class="main-contain">

</div>

【讨论】：

仍在插入该对象