Write a new html with js or jquery

Question

I wanted to know if there is a way to present a new html page using a string containing all the content of the new page that I am trying to present, the code is below:

$("#form").on('valid.fndtn.abide', function () {
        var data = $(this).serializeArray();
        sendAjax('index.php?uc=eventos&a=logView', 'POST', data, function (data) {
            try {
                var data = jQuery.parseJSON(data);
                if (!data.status) {
                    alertify.error("A hora ou a Data inserida excede a hora e a data corrente! " +
                            "Você não pode ver resgistros do futuro!");
                }
            } catch (e) {
                document.open();
                document.write(data);
                document.close();
            }
        });
    });

this document.write(data); is where I write a new HTML page with the string received from the server, in firefox it works at first but if I update the resulting page it breaks all the formatting and Chrome repeats elements, ie is not a viable alternative, my question is, within that "date" I have my new string html as I do to display it in the browser window without using Document.write.

Thanks in advance for your attention and help.

Answer 1

Friend, I’d like to first give you a little advice, try not to use try-catch to control the flow of the application, after all try-catch is to treat mistakes, nothing more.

As to the document.write, the ideal is to create a DocumentFragment with the DOMString and add it to the body.

var form = document.getElementById("form");
form.addEventListener("valid.fndtn.abide", function (event) {
  var formData = new FormData(form);
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("POST", "index.php?uc=eventos&a=logView");
  xmlHttp.onreadystatechange = function (event) {  
    if (xmlHttp.readyState == 4) {  
      if (xmlhttp.status == 200) {  
        var template = document.createElement("template");
        template.innerHTML = xmlhttp.responseText;
        document.body.appendChild(template.content);
      } else {  
        alertify.error(xmlhttp.statusText);  
      }  
    }
  }
  xmlHttp.send(formData);
});

Answer 2

Yes, it is possible.

With Js Puro:

document.getElementById("ID_DIV").innerHTML = "<input type='text'> </input>"; 

And with Jquery:

$("#ID_DIV").html("<input type='text'> </input>");