将html属性添加到字符串

Question

I am appending some html to a div using jQuery, where both rowString and inputString are defined previously:

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

rowString looks like this:

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

And I am trying to inject a value into this. I've tried rowString.val('myvalue') , but it fails with Uncaught TypeError: string.val is not a function .

How can I add an html attribute such as value to a string?

Answer 1

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

You can parse it, set the value, and then get the outerHTML to get the HTML back.

 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>`);