如何通过此文本框将多行添加到不同的不同 div/span 标签中？

Question

如何通过此文本框将多行添加到不同的不同跨度标签中？

有一个文本框，通过使用这个框，我可以插入一个新的 div/span 类内容，对吗？ 但是每次当我需要添加新类时，我都需要在这个文本框中写一个新行并需要按下发送按钮，现在我想要的是，如果我有 10 行内容和“Enter”按钮换行符

喜欢
我的 1 号线在这里
我的 2 号线在这里
我的 3 号线在这里
我的 4 号线在这里
我的 5 号线在这里
我的 6 号线在这里
我的 7 号线在这里
我的 8 号线在这里
... 等等

然后我想将这个文本框中的所有 10 行粘贴在一起，并通过按发送按钮我希望所有行都必须添加到不同的不同 div/span 类中，而不是全部在一个带有 <br> 标签的类中，现在正在工作。

所以请帮我改进我的代码爱你帮手，提前致谢

 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>

所以请帮我改进我的代码爱你帮手，提前致谢

Answer 1

您可以尝试使用String.prototype.split()以便每个文本由\\n （新行）分隔成一个数组，然后您可以像使用Array.prototype.forEach()一样迭代每个元素。 这是您可以使用的代码：

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

Answer 2

我采取了一些自由并简化了您的代码，如下所示。 它完成了我认为您的代码正在尝试的一切。

请注意，我使用.split("\\n")根据每个换行符来中断您的输入，然后根据需要对其进行迭代。

另外，你说你要插入一个 div/span，但我没有看到你的代码实际上创建了一个 span 标签。 我写了我的代码来为你做这件事。

 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>