Скачать или смотреть How to Add Multi-Line Content to Different div or span Tags from a Text Box?

Learn how to efficiently add multi-line text to separate `div` or `span` tags in HTML using JavaScript.
---
This video is based on the question https://stackoverflow.com/q/64949357/ asked by the user 'Rakesh' ( https://stackoverflow.com/u/13958051/ ) and on the answer https://stackoverflow.com/a/64950203/ provided by the user 'Marc' ( https://stackoverflow.com/u/1024832/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can i add multi lines together into different different div / span tag through this text box?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction

Have you ever faced the challenge of adding multiple lines of text from a text box to different div or span elements in your HTML? It’s a common task that many developers want to simplify. Imagine you have a text area where users can input lines, and upon pressing a "Send" button, each line from that text box should appear in its own designated element. In this guide, we will walk through how to achieve this using JavaScript and some basic HTML.

The Problem

You have a web page with a text box where you can enter multiple lines of text. Traditionally, when you press the send button, all lines get added to a single element separated by line breaks.

For example:

[[See Video to Reveal this Text or Code Snippet]]

Instead of adding each line to separate div or span tags, they all get dumped into one element. We want to change that.

The Desired Outcome

When you press the send button:

Each line should be added within its own div or span tag.

The text should be appropriately encoded to prevent any HTML injection issues.

Solution Overview

To achieve this, we will split the text input by line breaks, and iterate through each line to create separate div or span elements dynamically. Here's how to implement this solution step-by-step.

Step-by-Step Implementation

Let’s begin with the necessary HTML structure:

[[See Video to Reveal this Text or Code Snippet]]

Next, we'll write our JavaScript to handle the button click and create the required elements:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Event Listener: The button is given an event listener that triggers when clicked.

Splitting Input: We use .split("\n") to divide the text input into individual lines based on line breaks.

Generating Elements: For each line, we create a new div that contains a span which holds the encoded text.

Dynamic HTML Update: Each newly created div is appended directly to the innerDiv using innerHTML.

Encoding: The encodeHtmlEntity function ensures that any HTML entities in the text are safely encoded.

Conclusion

With this approach, you can easily add multiple lines from a text area into distinct divs or spans, ensuring a clean and structured presentation of user input. By following these simple steps and implementing the code provided, you can enhance the functionality of your web applications seamlessly.

Now you’re ready to integrate this feature into your own projects. Happy coding!