JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper"></div>

CSS

.item{
    background-color: grey;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
}

JavaScript

$(document).ready(function(){
    // 1-й подход
    var aOne = document.createElement('a');
    aOne.href = "http://google.com"
    aOne.innerText = "Гугли!"
    document.getElementById('wrapper').appendChild(aOne);
    
    // 2-й подход
    $('#wrapper').append('<a href="http://google.com">Гугли!</a>');
    // 3-й подход
    $('<a>', { href: 'http://google.com', text: 'Гугли!'}).appendTo('#wrapper');
    
    
    //Динамический текст
    var text = '<a href="http://google.com">Я элемент</a>';
    var title = 'До кавычки"после кавычки'
    
    
    var elementJq = $('<div/>', {
        title: title,
        text: text,
        class: 'item',
        click: function() {
            alert($(this).attr('data-system-id'));
          },
        // если jQuery не находит метода с таким названием
        // то вставляет атрибут
        'data-system-id': 100,
        'hh_hh_hh': true,
    });
    
    var elementClassic = '<div class="item" title="' + title + '">' + text + '</div>';
    
    $('#wrapper').append(elementJq).append(elementClassic);
    
    $('<div>', {
        text: 'Я контейнер-ссылка',
        href: 'http://google.com',
        target: "_blank",
        css: {
            color: 'green',
            backgroundColor: 'black',
            display: 'block',
            position: 'relative',
            padding: '10px',
        },
        width: 200,
        height: 100,
        offset: {
            top: 20,
            left: 120,
        },
        
        append: $('<br>')
                .add($('<span>', 
                  { 
                      text: 'Я вставленный html', 
                      css: { fontWeight: 'bold'}
                  }))
                .add($('<br>'))
                .add($('<span>', {
                    html: '<strong>Мой html задан в параметрах</strong>',
                })),
    })
    .appendTo('#wrapper');
    
    $('<input>', {
        type: 'text',
        name: 'newTextField',
        title: 'Вводи в меня! Вводи в...