Set value of input html string with jquery

Question

I have snippet of HTML in a string like this:

var htmlString = '<input type="text" id="someID" name="someID">';

How do I, with jQuery, set its value so that the HTML ends up like this:

'<input type="text" id="someID" name="someID" value="newValue">';

Thanks, Scott

Diode · Accepted Answer · 2012-08-17T15:26:08.117

7

$(htmlString).attr("value", "newValue");

But this will return jQuery object, not string. You can add it to DOM.

$(htmlString).attr("value", "newValue").appendTo("body"); // you can give any element instead of body

EDIT :

You can use @idor_brad's method. That is the best way or

var htmlString = '<input type="text" id="someID" name="someID">';

var $htmlString = $(htmlString);
$htmlString.attr("value1", "newValue1");
$htmlString.attr("value2", "newValue2");
$htmlString.attr("value3", "newValue3");

console.log($htmlString.get(0).outerHTML);

or

var htmlString = '<input type="text" id="someID" name="someID">';

var $htmlString = $(htmlString);
$htmlString.attr("value1", "newValue1");
$htmlString.attr("value2", "newValue2");
$htmlString.attr("value3", "newValue3");

console.log($("<div>").append($htmlString).html());

edited Aug 17 '12 at 15:26

answered Aug 17 '12 at 15:03

Diode

24,570
8
40
51

I know that... I thought maybe you had found a clever way to do it without using the DOM. Oh well :) – mellamokb Aug 17 '12 at 15:08
Do you want to retrieve the final string without using DOM ? That is also possible – Diode Aug 17 '12 at 15:09
That gets me most of the way there. How do I get the HTML string back out of the jQuery object? – Doo Dah Aug 17 '12 at 15:09

score 6 · Answer 2 · answered Aug 17 '12 at 15:02

You would first need to add your element to the DOM (ie to your web page). For example:

$(".container").append(htmlString);

Then you can access your input as a jquery object and add the value attribute like so:

$("#someID").val("newValue");

-- See Demo --

score 4 · Answer 3 · answered Aug 17 '12 at 15:05

4

You just want to manipulate the string, right? There are a lot of ways to skin this cat, but

var newString = htmlString.replace('>', ' value="newValue">');

answered Aug 17 '12 at 15:05

egbrad

2,387
2
23
27

score 1 · Answer 4 · answered Aug 17 '12 at 15:03

1

After the dom ready, append your input to body and then grab the input with id = "someID" and set its value to newValue

   $(document).ready(function(){
       $("body").append(htmlString);
       $("#someID").val("newValue");
    });

answered Aug 17 '12 at 15:03

Shreedhar

5,502
3
22
27

This is the most elegant solution in my case, as my html is complex. – Gogol Oct 05 '15 at 11:17

Set value of input html string with jquery

4 Answers4

Linked