將html屬性添加到字符串

Question

我正在使用jQuery將一些html附加到div上，其中rowString和inputString都是先前定義的：

$("#filterContainer").append(
            rowString +
            `<label class='filterLabel' for=${filter}>${filter}</label>` +
            "<i class='fas fa-minus-circle removeFilter float-right'></i>" +
            inputString +
            "</div>"
        );

rowString看起來像這樣：

let rowString = "<input id='autocomplete' type='search' class='form-control' name='filters[location]' >"

我正在嘗試為此注入價值。 我已經嘗試過rowString.val('myvalue') ，但失敗，並出現Uncaught TypeError: string.val is not a function 。

如何在字符串中添加html屬性（例如value ？

Answer 1

$(rowString).attr('value', 'myvalue').prop('outerHTML')

您可以解析它，設置值，然后獲取outerHTML以獲取HTML。

 let rowString = "<input id='autocomplete' type='search' class='form-control' name='filters[location]' >"; console.log( $(rowString).attr('value', 'myvalue').prop('outerHTML') ); 

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

Answer 2

$(rowString).val('myvalue')

並且，更改您的追加對此：

$("#filterContainer").append(`${rowString}<label class='filterLabel' for=${filter}>${filter}</label><i class='fas fa-minus-circle removeFilter float-right'></i>${inputString}</div>`);