How to add an HTML code inside an <ol> tag using Javascript?

Question

Is there any way I can add a certain HTML code within a tag, using Javascript ?

It follows code of the structure I have:

HTML

<ol class="wrap-card" id="demo">
        <li class="card card_colorFirst" data-color="first">
        <nav class="wrap-card-btns">
            <ul>
                <li class="btn-pad card_delete">
                    <a href="">Excluir</a>
                </li>
                <li class="btn-pad card_edit">
                    <a href="">Editar</a>
                </li>
                <li class="btn-pad card-colors isActive" data-color="first">
                <a href="#">Azul</a>
                </li>
                <li class="btn-pad card-colors" data-color="second">
                <a href="#">Amarelo</a>
                </li>
                <li class="btn-pad card-colors" data-color="third">
                <a href="#">Vermelho</a>
                </li>
                <li class="btn-pad card-colors" data-color="fourth">
                <a href="#">Verde</a>
                </li>
            </ul>
        </nav>
        <p class="card-content" contenteditable="false">
            Bem-vindo ao Ceep
        </p>
        </li><!--
     --></ol>

Javascript

var $newCardForm = document.querySelector('.new-card');
var $newCardContent = document.querySelector('.new-card-content');
var $newCardSubmit = document.querySelector('.new-card-submit');
var $newCardError = document.createElement('span');
$newCardForm.addEventListener('submit', function(event){
    //não permite que o botão recarregue a página
    event.preventDefault();
    if ($newCardContent.value == '') {

        //Caso esteja vazio, mostra a mensagem de erro
        $newCardError.textContent = 'Por favor, preencha o campo acima para gerar seu cartão';
        $newCardError.classList.add('new-card-error');
        //Adiciona a mensagem antes do botão de envio, abaixo do campo de texto
        $newCardForm.insertBefore($newCardError, $newCardSubmit);

    }else{

        var $wrapCards = document.querySelector('.wrap-card')
        //Seleciona o primeiro cartão existente na página
        var $firstCard = document.querySelector('.card')
        //Clona o cartão com toda a sua árvore de filhos e classes
        var $copyCard = $firstCard.cloneNode(true);

        $copyCard.querySelector('.card-content').textContent = $newCardContent.value;
        $wrapCards.insertBefore($copyCard, $firstCard)

    };
});

//Caso a pessoa digite algo após o erro ser mostrado, a mensagem de erro é ocultada
$newCardContent.addEventListener('input', function(){

    var $removeError = document.querySelector('.new-card-error');
    //verifica se a mensagem de erro existe, para evitar loops ao digitar o texto
    if($newCardError != null){ 

        $newCardError.remove();

    };

});

Answer 1

Use the jquery append method:

$(document() {
     $('#demo').append('<li><table> ... </table></li>');
});

Example in Jsfiddle

Or direct Javascript:

// criando um nó do tipo <li>
var node = document.createElement("LI"); 
// criando uma tabela
var tabela = document.createElement("TABLE");        
node.appendChild(tabela);     
 // acrescenta o elemento                         
document.getElementById("demo").appendChild(node);

Example in Jsfiddle