Show HTML only from a div

Question

I have a function that generates dynamic form, this form is loaded via a GET via Jquery and shows the form mounted on a div.

I need to get only the source code of this DIV, someone knows a way to do this?

This is an example of the code you would need separate!

<div id="form_html">
<form name="form" action="PAGINA" method="post" id="se-form" data-toggle="validator">
            <div class="row">

                <div id="div_senha_usuario" class="form-group col-md-6">
                    <label>Senha usuario</label>
                    <input type="text" name="senha_usuario" class="form-control tipo_senha_usuario " id="senha_usuario" required="">    
                    <div class="help-block with-errors se-text-p"></div>      
                </div>
                <div id="div_data_cadastro" class="form-group col-md-6">
                    <label>Data cadastro</label>
                    <input type="text" name="data_cadastro" class="form-control tipo_data_cadastro " id="data_cadastro" required="">    
                    <div class="help-block with-errors se-text-p"></div>      
                </div>
                <div id="div_sec_atual" class="form-group col-md-6">
                    <label>Sec atual</label>
                    <input type="text" name="sec_atual" class="form-control tipo_sec_atual " id="sec_atual" required="">    
                    <div class="help-block with-errors se-text-p"></div>      
                </div>
                <div id="div_status_conta" class="form-group col-md-6">
                    <label>Status conta</label>
                    <input type="text" name="status_conta" class="form-control tipo_status_conta " id="status_conta" required="">    
                    <div class="help-block with-errors se-text-p"></div>      
                </div>                    
                <div class="form-group col-md-12">
                  <button class="btn btn-danger">Ação do botão</button>     
                </div>
            </div>
</form>

Answer 1

You can achieve this using the function Document.querySelector() to get the element you want the source code from and then the attribute Element.outerHTML to get the desired information. In the example below I print the information on a console.log, but you can use it as you wish.

console.log(document.getElementById('form_html').outerHTML);

<div>
  Conteúdo irrelevante
  <div id="form_html">
    <form name="form" action="PAGINA" method="post" id="se-form" data-toggle="validator">
      <div class="row">

        <div id="div_senha_usuario" class="form-group col-md-6">
          <label>Senha usuario</label>
          <input type="text" name="senha_usuario" class="form-control tipo_senha_usuario " id="senha_usuario" required="">
          <div class="help-block with-errors se-text-p"></div>
        </div>
        <div id="div_data_cadastro" class="form-group col-md-6">
          <label>Data cadastro</label>
          <input type="text" name="data_cadastro" class="form-control tipo_data_cadastro " id="data_cadastro" required="">
          <div class="help-block with-errors se-text-p"></div>
        </div>
        <div id="div_sec_atual" class="form-group col-md-6">
          <label>Sec atual</label>
          <input type="text" name="sec_atual" class="form-control tipo_sec_atual " id="sec_atual" required="">
          <div class="help-block with-errors se-text-p"></div>
        </div>
        <div id="div_status_conta" class="form-group col-md-6">
          <label>Status conta</label>
          <input type="text" name="status_conta" class="form-control tipo_status_conta " id="status_conta" required="">
          <div class="help-block with-errors se-text-p"></div>
        </div>
        <div class="form-group col-md-12">
          <button class="btn btn-danger">Ação do botão</button>
        </div>
      </div>
    </form>
  </div>

Document.querySelector()

Returns the first element within the document (using deep, pre-ordered and cross-sectional sorting of document nodes) that corresponds to the specified group of selectors.

---

Element.outerHTML

The attribute outerHTML of the DOM(Document Object model) structure obtains a serialized fragment of HTML code describing the element including its descendants. It is possible to replace the element in question with nodes obtained by analyzing a string.