ввод текста html, введенный с помощью javaScript, игнорирует дизайн материала cclick

Question

Я делаю платформу шаблонов и использую дизайн материалов для внешнего вида. Я только начал кодировать часть, где вводимые данные вводятся в форму. Дело в том, что я только начал вводить текстовые вводы, и это выглядит так, как должно, но cc onclick не работает! (При нажатии css синяя линия расширяется от центра ввода текста, сообщая, что ввод находится в фокусе)

Вот как я ввожу HTML:

document.getElementById("smallTextField").onclick = function () {
let div = document.getElementById("formContainer")
div.insertAdjacentHTML("afterbegin", '<div class="col-sm-3">\n' +
    '                                    <div class="form-group">\n' +
    '                                        <div class="form-line" id="test">\n' +
    '                                            <input type="text" class="form-control" placeholder="col-sm-3">\n' +
    '                                        </div>\n' +
    '                                    </div>\n' +
    '                                </div>');}

Я надеюсь, вы понимаете мою проблему: /

Answer 1

Если вы можете использовать jQuery, вы можете использовать функцию $element.prepend() после привязки к событию click.

$('#smallTextField').on('click', function () {
    let $div = $('#formContainer');
    $div.prepend(
      '<div class="col-sm-3">\n' +
      '    <div class="form-group">' +
      '        <div class="form-line" id="test">' +
      '            <input type="text" class="form-control" placeholder="col-sm-3" />' +
      '        </div>' +
      '    </div>' +
      '</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="smallTextField" placeholder="smallTextField" />

<div id="formContainer"></div>