附加物件而不是html -有解無憂

我試圖在滑鼠點擊時插入一些bootstrap元素，但似乎是插入[object Object]，請猜測我哪里出錯了，提前感謝

Jquery片段

//增加技能容器。
let addSkillsContainer =（）=>{
  
    let div_contain =$("<div></div"/span>)
    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)
}


//呼叫技能add函式的事件
$(add).on('click', function (e) {
    e.preventDefault()

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

在html中輸出

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

uj5u.com熱心網友回復：

你在這部分代碼中存在問題

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

在jQuery中，如果你像陣列一樣訪問，它會回傳html dom物件。

把它改為

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

uj5u.com熱心網友回復：

試試這個

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

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

。

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

    addSkillsContainer（）。
    
});

let addSkillsContainer = (/span>) =>{
    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>/span>

<button id="add"/span>> 添加</按鈕>

<div class="main-contain">/span>

</div>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/320419.html

標籤：

上一篇：避免DOM變化被合并在一起

下一篇：在XPath中，我如何尋找兩個元素之間的東西？