Как добавить контент на свою страницу через текстовое поле?

Question

Я бы хотел, чтобы на моей странице появилось текстовое поле, которое ведет себя следующим образом: при нажатии кнопки ввода содержимое текстового поля добавляется на страницу. Я также хотел бы перерыв <br> после каждого представления.

Как это сделать в HTML и JavaScript?

Answer 1

Во-первых, создать <textarea> и <button> элементы, а затем создать или выбрать предпочтительно в <div> и дать ему класс, я буду использовать class="content".

<div> 
    <textarea></textarea> 
    <button>Add content</button> 
</div> 
<div class="content"></div> 

Затем используйте этот простой скрипт, который выполняется при загрузке. В основном, когда нажата кнопка <button>, функция сначала проверяет, является ли <textarea> пустым или нет, удаляя его из пробелов в начале и конце. Если <textarea> не пуст, его содержимое добавляется к <div class="content"> внутри элемента <p>, за которым следует <br>.

$(document).ready(function(){ 
    $('button').click(function(){ 
     toAdd = $.trim($('textarea').val()); 
     if(toAdd !== ""){ 
     $('.content').append('<p>'+ toAdd + '</p><br>'); 
     } 
    }); 
)}; 

Не забудьте связать библиотеку jQuery с документом.