Input text value does not come with outerHTML

Question

I need to store an HTML code in the database. I can generate this HTML and display it in a modal the way I want it to.

But when I go to save him in the bank, I have to run the remote:

var $texto = $html.prop('outerHTML');

to pass as parameter to variable $texto for AJAX... what happens is that using outerHTML all the values of the fields are lost and I can’t find a solution to it.

Remembering that the $html variable when I put it to be displayed in a modal has all the values:

swal({
  title: "Correção",
  html: $html
});

Simplifying I use outerHTML to turn HTML into string, but when this happens the input values do not go together.

How do I make the values of the fields in the code?

Simplified code:

var $html = $('<div />',{html:text});//text tem o HTML vindo do banco

$html.find('[type="text"]').each(function(i){//Esse each popula o formulário
      $(this).prop('value',resposta_aluno[i+1]);
      $(this).prop('disabled', true);
      if(acertos[i] == 0){
        $(this).addClass("exercicio_errado");
      }
    });

var $texto = $html.prop('outerHTML');//transforma o HTML em texto para que possa ser inserido no banco

Answer 1

To make explicit in the widget declaration, replace the $(this).prop('value',resposta_aluno[i+1]); for $(this).attr('value',resposta_aluno[i+1]);

var $html = $('<div />',{html:'<input type="text" />'});//text tem o HTML vindo do banco

$html.find('[type="text"]').each(function(i){//Esse each popula o formulário
      $(this).attr('value',"A");
      $(this).prop('disabled', true);
      
    });

var $texto = $html.prop('outerHTML');//transforma o HTML em texto para que possa ser inserido no banco
console.log($texto);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div />