Как вывести элементы в нужном месте?

Question

[Иван Ильясов]

Есть JS-код, который выводит сообщения об ошибке, если форма заполнена не верно.

Шаблон следующего вида:

var buildPrompt = function(caller,promptText) {
		var divFormError = document.createElement('div')
		var formErrorContent = document.createElement('div')
		
		
		$(divFormError).addClass("formError")
		$(divFormError).addClass($(caller).attr("name"))
		$(formErrorContent).addClass("formErrorContent")
		
		$("body").append(divFormError)
		$(divFormError).append(formErrorContent)
		$(formErrorContent).html(promptText)

		$(divFormError).fadeTo("fast",0.8);
	};

В HTML, в конечном виде он отображается так:

<div class="formError name"><div class="formErrorContent">Это поле не должно быть пустым!</div></div>
<div class="formError telephone"><div class="formErrorContent">Это поле не должно быть пустым!</div></div>
<div class="formError email"><div class="formErrorContent">Это поле не должно быть пустым!</div></div>

Находятся эти он в body, что видно из кода JS выше.

Сама форма имеет вид:

<form method="GET" action="contact.html" name="form-1">
            <table class="form">
              <tr>
                <td class="form-left">Имя:</td>
                <td>
                  <input name="name" type="text" class="buy-input">
                  <span id="error_text_name"></span>
                </td>
              </tr>
              <tr>
                <td class="form-left">Телефон:</td>
                <td>
                  <input name="telephone" type="text" class="buy-input">
                  <span id="error_text_telephone"></span>
                </td>
              </tr><tr>
                <td class="form-left">Почта:</td>
                <td>
                  <input name="email" type="text" placeholder="Имя" class="buy-input">
                  <span id="error_text_email"></span>
                </td>
              </tr>
            <div class="form-submit">
              <input name="send" type="button" value="Отправить" class="feedback">
            </div>
</form>

На данный момент сообщения с ошибками <div class="formError XXX"> отображаются внизу страницы под формой.

Вопрос:
Как сделать так, чтобы сообщения с ошибками <div class="formError XXX"> отображались в соответствующих блоках <span id="error_text_XXX">?

Answer 1

[Иван Ильясов]

Решение было найдено самостоятельно:
1. Заменил все <span id="error_text_XXX"> на <span id="XXX">

var buildPrompt = function(caller,promptText) {
		var divFormError = document.createElement('div')
		var formErrorContent = document.createElement('div')
		var spanIdfromDiv = document.getElementById($(caller).attr("name"))
		
		$(divFormError).addClass("formError")
		$(divFormError).addClass($(caller).attr("name"))
		$(formErrorContent).addClass("formErrorContent")
		
		$(spanIdfromDiv).append(divFormError)
		$(divFormError).append(formErrorContent)
		$(formErrorContent).html(promptText)

		$(divFormError).fadeTo("fast",0.8);
	};