Print div with appendchild

Question

I’m trying to print with appendchild, without having to mount using Document.createelement, I know it’s possible but I don’t know how, with innerHTML works but it erases everything, follows below:

var div = "<div id='teste'>valorqualquer</div>";
document.getElementsByTagName("body")[0].appendChild(div);

//But present the message below:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I’ve tried that (but it only prints text):

div =  document.createTextNode(div);  

document.getElementsByTagName("body")[0].appendChild(div);

Look at the structure I need to build:

<div id="erroDeCampos" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document"> 
        <h3 class="center">Campos com erro:</h3>                  
        <div class="alert alert-danger">
            <strong>Erro!</strong> You should <a href="#" class="alert-link">read this message</a>.
        </div>  
    </div>
</div>

For each field that my form present will be created this structure, but to do this I think would be a very large code, follows part of the code:

var divElement = document.createElement("div");
divElement.setAttribute("id", "erroDeCampos");
divElement.setAttribute("class","modal fade bs-example-modal-sm");
divElement.setAttribute("tabindex", "-1");
divElement.setAttribute("role", "dialog");
divElement.setAttribute("aria-labelledby", "mySmallModalLabel");    

var divElementModalAninhado = document.createElement("div");
divElementModalAninhado.setAttribute("class", "modal-dialog modal-sm");
divElementModalAninhado.setAttribute("role", "document");

var h3ElementAninhado = document.createElement("div");
h3ElementAninhado.setAttribute("class", "center");
h3ElementAninhado.innerHTML = "Campos com erro";

var divaninhadoaoh3acima = document.createElement("div");

Answer 1

For this you must use the method insertAdjacentHTML()

Example of use:

elemento.insertAdjacentHTML(posição, texto);

Positions:

beforebegin Before the element.
afterbegin Inside the element, before your first child (childNode).
beforeend Inside the element, after their last child (childNode).
afterend After the element.

Demonstration:

var div = '<div id="teste">valorqualquer</div>';
document.body.insertAdjacentHTML( 'beforeend', div );

Corpo da página!!!

Check browser compatibility in the documentation.

Link to the documentation

• insertAdjacentHTML()

Answer 2

I can’t quite understand your restrictions. You need to pass a pro DOM node appendChild, no use passing text. This works, I do not know if it meets you:

var div = document.createElement('div');  
div.id = 'teste';
div.innerHTML = 'valor qualquer <strong>valendo HTML</strong>';
    
document.body.appendChild(div);