Блог

У меня есть текстовое поле и кнопка, я пытаюсь разобраться с некоторыми функциями обмена сообщениями, используя руководство по jQuery, но не могу найти правильное направление. я хочу, чтобы ввод из текстового поля отображался в DIV под DIV, содержащим «Отправленные сообщения отображаются здесь». тестирование с использованием www.htmledit.squarefree.com чтобы протестировать приведенный ниже код и использовать F12 (режим разработки), я могу видеть дерево HTML

 <script src="http://code.jquery.com/jquery-1.5.min.js"></script>

<div>
 <p>
    <input type = "text"
            id  = "textfield" />
    <button type ="button" id="btn">Add Message </button>
 </p>
 <Script>
      $( "#btn" ).click(function() {
           var message = $.trim($("#textfield").val()) 
          $("#sent").append(message);      
          $("#sent").append("<br />");    
                 
      });
 </Script>
</div>

<div id="sent" style="font-style: italic">
     <div>Sent messages appear here.</div>  
</div>
  

Добавленное сообщение, если я наберу «U» в текстовом поле, выводится нормально на нижний экран, НО в дереве html нет тегов DIV. следующие методы кажутся полезными, но ссылки на них немного сбивают с толку. функции .html(), .text(), .append() и $(«html»)

в консоли элементов дерево должно выглядеть следующим образом.

Я думаю, что вы добавляете текст. Сообщение не завершается тегом ‘div. итак, сделать это очень просто.

 $("#sent").append('<div>'   message   '</div>');      
$("#sent").append("<br />"); 
  

• добавить функцию. Это добавление элемента в цель.
  вы должны добавить html-тег для добавления сообщения

• функция html. Это для получения дочернего html-элемента целевого объекта.

• текстовая функция. Это для получения всего текста для целевого объекта. если вы вызываете текстовую функцию, вы получаете только строку без какого-либо html-элемента. Это отличие от html. Html — это элемент get children html.