1

Значит я просто решил поиграть с jquery, написал такой код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-2.2.3.js"></script>
</head>
<body>
    <div id="message_area"></div>
    <textarea id="for_send" title="Test"></textarea>
    <button id="send">Submit</button>
    <script src="script.js"></script>
</body>
</html>

Это был html, вот js:

$(document).ready(function(){
$("#send").click(function(){
    var text;
    text = $("#for_send").val();
    $('#message_area').append('<div></div>').text(text).addClass('.message');
});
});

Задача такова: пытаюсь вставлять сообщения(текст из div) в окно с сообщениями(#message_area) .Везде описывается метод append() "... вставляет в конец контента элемента для которого вызывается append...", а у меня что-то не так: не записывается контент, а заменяется, т.е. не вставляется в конец, а предыдущее содержимое #message_area удаляется и вставляется новое из #for_send Уже долго над этим сижу и никак не пойму в чем проблема.Размеры textarea указаны в css файле

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 13 апр 2016 в 5:58

2 ответа 2

6

Давайте разберем что вы делаете

$('#message_area') // получаем элемент по id
    .append('<div></div>') // добавляем в конец элемента новый div
    .text(text) // меняем содержимое элемента*
    .addClass('.message'); // добавляем класс к элементу*

* вот тут у вас проблема, вы расчитываете, что text добавиться к созданному div, но метод append возвращает контекст, в котором он вызван, а не элемент, который мы передали как параметр для вставки

Выведите в консоль:

var element = $("<div id='div'></div>");
element.append("<a>"); // что вернется? Давайте проверим
element == element.append("<a>"); // true

То есть вы добавляете div, а потом вставляете текст в элемент #message_area, а вот метод text уже перезаписывает все содержимое, отсюда результат который вы описываете

Решение: создать дополнительную переменную и работать с ней

var messageDiv = $("<div class='message'></div>");
messageDiv.text(text);
$('#message_area').append(messageDiv);

UPD ( предложенный @Grundy)
Вариант без доп. переменной

$("<div class='message'></div>")
    .text(text)
    .appendTo('#message_area');
1
  • 1
    можно без доп переменной, если воспользоваться appendTo
    – Grundy
    13 апр 2016 в 6:01
0

Вот так будет работать.

Вы в своем примере добавляете пустой див и присваиваете потом элементу с id #message_area class = message и вставляете в него текст из $("#for_send").val()

$(function(){
$("#send").on('click', function(){
    var text = $("#for_send").val();
    $('#message_area').append($('<div/>', {text: text, class: 'message'}));
});
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.