javascript - jqueryで入力html文字列の値を設定する

Question

次のような文字列に HTML のスニペットがあります。

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

jQuery を使用して、HTML が次のようになるように値を設定するにはどうすればよいですか。

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

ありがとう、スコット

Answer 1

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

ただし、これは文字列ではなく jQuery オブジェクトを返します。DOM に追加できます。

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

編集 ：

@idor_brad のメソッドを使用できます。それが最善の方法か、

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

また

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

Answer 2

最初に要素を DOM (つまり、Web ページ) に追加する必要があります。例えば：

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

次にinput、jquery オブジェクトとしてアクセスし、次のように value 属性を追加できます。

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

-- デモを見る --

Answer 3

文字列を操作したいだけですよね？この猫の皮を剥く方法はたくさんありますが、

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

Answer 4

dom の準備ができたら、入力を body に追加し、id = "someID" で入力を取得し、その値を newValue に設定します

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