javascript - 将 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]' >"

我正在尝试为此注入(inject)一个值。我已尝试 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>