Insert HTML code block with javascript

Question

Despite being new to the forum, I follow here for a long time and is always a great source of knowledge. But I do have a problem that I haven’t been able to solve yet. I am creating an occurrences logging system, where I created the fields of the first occurrence in this way:

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

As the idea of the project is to provide a limit of 15 fields at most, I would not like to leave them always pre-created and loaded in the DOM... I would like them to be created dynamically by JS.

It is possible for me to store this code, written this way, using Javascript and when the user clicked on a button, he added this content to the page?

Answer 1

Hello,

you can create and manipulate components with javascript as an example below. Each time you want to add the block is just encapsulate the code in a method and call it at the click of a button.

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