0

Apesar de ser novo no fórum, acompanho aqui por muito tempo e é sempre uma grande fonte de conhecimento. Mas recorro a um problema que não consegui encontrar solução ainda. Estou criando um sistema de registro de ocorrências, onde eu criei os campos da primeira ocorrência dessa forma:

                        <div class="box-programacao-rede" id="box-programacao-rede-2">
                            <div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
                                <textarea class="form-control textarea-ocorrencias" rows="1" name="ocorrencias-programacao-rede-2" id="ocorrencias-programacao-rede-2" placeholder="Ocorrência 2"></textarea>
                            </div>
                            <div class=" col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 cb-programacao-rede" id="div-cb-programacao-rede-2">
                                <i class="fa fa-angle-double-left fa-3x"></i>
                                <input type="checkbox" class="cb-programacao-rede" id="cb-programacao-rede-2" /><label for="cb-programacao-rede-2" data-on-text="Resolvido" data-off-text="Em aberto"></label>
                                <div class="btn-programacao-rede-icon"></div>
                                <i class="fa fa-angle-double-right fa-3x"></i>
                            </div>
                            <div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
                                <textarea class="form-control textarea-ocorrencias" rows="1" name="acoes-programacao-rede-2" id="acoes-programacao-rede-2" placeholder="Ação Corretiva para ocorrência 2"></textarea>
                                <form>
                                    <div class="form-group uploadFiles">
                                        <input type="file" multiple id="uploadFileOcorrenciaPgmRede2"></input>
                                    </div>
                                </form>
                            </div>
                        </div>

Como a idéia do projeto é disponibilizar um limite de 15 campos no máximo, não gostaria de deixar eles sempre pré-criadas e carregados no DOM... gostaria que eles fossem criadas dinamicamente por JS.

É possível eu armazenar esse código, escrito dessa forma, utilizando Javascript e quando o usuário clicasse em um botão, ele adicionasse esse conteúdo na página?

0

1 Resposta 1

2

Olá,

você pode criar e manipular componentes com javascript conforme exemplo abaixo. Cada vez que você queira adicionar o bloco é so encapsular o código em um método e chamar ele no click de um botão.

<div class="box-programacao-rede" id="container">
</div>

<script>
    var container = document.getElementById("container");
    
    var div = document.createElement("div");
    div.className = "col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5";

    var txtArea = document.createElement("textarea");
    txtArea.rows = 1;
    txtArea.name = "ocorrencias-programacao-rede-2";
    txtArea.id = "ocorrencias-programacao-rede-2";
    txtArea.placeholder = "Ocorrência 2";

    div.appendChild(txtArea);
    
    container.appendChild(div);
    
    // div div-cb-programacao-rede-2

    var div2 = document.createElement("div");
    div2.className = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 cb-programacao-rede";
    div2.id = "div-cb-programacao-rede-2";

    var iLeft = document.createElement("i");
    iLeft.className = "fa fa-angle-double-left fa-3x";
    
    var ckBox = document.createElement("input");
    ckBox.type = "checkbox";
    ckBox.className = "cb-programacao-rede";
    ckBox.id = "cb-programacao-rede-2";

    var label = document.createElement("label");
    label.for = "cb-programacao-rede-2" 
    
    var divBtn = document.createElement("div");
    divBtn.className = "btn-programacao-rede-icon";

    var iRight = document.createElement("i");
    iRight.className = "fa fa-angle-double-left fa-3x";

    div2.appendChild(iLeft);
    div2.appendChild(ckBox);
    div2.appendChild(label);
    div2.appendChild(divBtn);
    div2.appendChild(iRight);

    container.appendChild(div2);

    // div 3

    var div3 = document.createElement("div");
    div.className = "col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5";

    var txtArea2 = document.createElement("textarea");
    txtArea2.className = "form-control textarea-ocorrencias";
    txtArea2.rows = 1;
    txtArea2.name = "acoes-programacao-rede-2";
    txtArea2.id = "acoes-programacao-rede-2";
    txtArea2.placeholder = "Ação Corretiva para ocorrência 2";

    var form = document.createElement("form");
    
    var divUpload = document.createElement("div");
    divUpload.className = "form-group uploadFiles";

    var inpFile = document.createElement("input");
    inpFile.type = "file";
    inpFile.multiple = true;
    inpFile.id = "uploadFileOcorrenciaPgmRede2";
    
    divUpload.appendChild(inpFile);

    form.appendChild(divUpload);

    div3.appendChild(txtArea2);
    div3.appendChild(form);

    container.appendChild(div3);
    
</script>

1
  • Excelente, Pablo! Funcionou certinho... Muito obrigado pela ajuda! Grande abraço
    – rdelgado
    31/03/2020 às 18:36

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .