Add html attribute to string

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?

Your rowString is just a string but your rowString.val(...) only works on jQuery objects. Create a jQuery object for it like Taplar does in his answer. — nurdyguy
– nurdyguy, Commented Jun 10, 2019 at 16:32

Taplar · Accepted Answer · 2019-06-10 16:45:21Z

4

$(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>

edited Jun 10, 2019 at 16:45

answered Jun 10, 2019 at 16:30

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fugu Over a year ago

If I do $(rowString).val('myval').val() I get myval which is great. When I use $(rowString).val('myval').prop('outerHTML') I get the original string back (with no value)

Taplar Over a year ago

Sorry, you actually have to use attr() in this case. Answer updated. @fugu

fugu · Accepted Answer · 2019-06-10 16:52:48Z

0

$(rowString).val('myvalue')

And, change your append to this:

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

edited Jun 10, 2019 at 16:52

fugu

6,6129 gold badges42 silver badges82 bronze badges

answered Jun 10, 2019 at 16:35

Leandro Machado

12 bronze badges

Collectives™ on Stack Overflow

Add html attribute to string

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related