How can i add multi lines together into different different div / span tag through this text box?

Question

How can i add multi lines together into different different span tag through this text box ?

There is an text box, by using this box i can insert a new div / span class content Right ? But every time when i need to add new class i need to write a new line in this text box and need to press send button, Now i want that if i have 10 lines content together with "Enter" button line break

Like
My Line 1 is here
My Line 2 is here
My Line 3 is here
My Line 4 is here
My Line 5 is here
My Line 6 is here
My Line 7 is here
My Line 8 is here
... and so on

then i want to paste all 10 lines in this text box together and by pressing send button i want that all lines must be add in different different div / span class not all in one class with < br > tag that is working now.

so plz help me to improve my code Love you Helper and Thanks in Advance

 const sendButton = document.getElementById('send-btn'); const textArea = document.getElementById('input'); const innerDiv = document.getElementById('inner'); var message = textArea.value; sendButton.addEventListener('click', function () { const message = new MessageContainerBuilder().BuildMessage(textArea.value); innerDiv.appendChild(message); textArea.value = ''; }); function encodeHtmlEntity(input) { var output = input.replace(/[\ -\香<>\\&]/gim, function (i) { return '&#' + i.charCodeAt(0) + ';'; }); return output; } function MessageContainerBuilder() { var createDivElement = function (classTest) { var div = document.createElement('div'); var classAttr = document.createAttribute('class'); classAttr.value = classTest; div.setAttributeNode(classAttr); return div; }; var createSpanElement = function (value, classTest) { var span = document.createElement('span'); if (classTest) { var classAttr = document.createAttribute('class'); classAttr.value = classTest; span.setAttributeNode(classAttr); } span.innerText = encodeHtmlEntity(value); return span; }; this.BuildMessage = function (text) { var divContainer = createDivElement('outgoing'); var messageSpan = createSpanElement(text, 'me'); divContainer.appendChild(messageSpan); return divContainer; }; }

 <div id="inner"> <div class="incoming"> <div class="them">Lorem </div> </div> <div class="outgoing"> <div class="me">Lorem ipsum </div> </div> </div> <textarea class="input" id="input" placeholder="Message..."></textarea> <button class="waves-effect waves-light" id="send-btn">Send</button>

so plz help me to improve my code Love you Helper and Thanks in Advance

Answer 1

You can try using String.prototype.split() so that each text is separated by \\n (new line) into an array, then you can iterate over each element like using Array.prototype.forEach() . Here's the code you can use:

sendButton.addEventListener('click', function () {
  textArea.value.split('\n').forEach((text) => {
    const message = new MessageContainerBuilder().BuildMessage(text);
    innerDiv.appendChild(message);
  });
  textArea.value = '';
});

Answer 2

I took some liberties and simplified your code as you can see below. It does everything I believe your code was attempting.

Note that I'm using .split("\\n") to break your input based on each newline character and then iterate over that as necessary.

Also, you said you were inserting a div/span, but I don't see your code actually creating a span tag. I wrote my code to do that for you though.

 const sendButton = document.getElementById('send-btn'); const textArea = document.getElementById('input'); const innerDiv = document.getElementById('inner'); var message = textArea.value; sendButton.addEventListener('click', function() { // split the textarea entries into an array let lines = (textArea.value).split("\\n"); // iterate over each line, creating a div/span and inserting into the DOM lines.forEach( (line) => { let encodedLine = encodeHtmlEntity(line); let newElement = `<div class="me"><span>${encodedLine}</span></div>`; innerDiv.innerHTML += newElement; }); // reset the textarea textArea.value = ''; }); function encodeHtmlEntity(input) { var output = input.replace(/[\ -\香<>\\&]/gim, function(i) { return '&#' + i.charCodeAt(0) + ';'; }); return output; }

 <div id="inner"> <div class="incoming"> <div class="them">Lorem </div> </div> <div class="outgoing"> <div class="me">Lorem ipsum </div> </div> </div> <textarea class="input" id="input" placeholder="Message..."></textarea> <button class="waves-effect waves-light" id="send-btn">Send</button>