JavaScript – updating value under certian conditions and append it to a <div></h1><div class="entry-meta"><span class="posted-on"><span class="published" itemprop="datePublished"> June 17, 2022</span><span class="updated" itemprop="dateModified"> June 17, 2022</span></span> / <span class="ast-reading-time">1 minute of reading</span></div> </div> </header><!-- .entry-header --> <div class="entry-content clear" itemprop="text" > <div class="s-prose js-post-body" itemprop="text"> <p>It sounds like all you need is to replace <code>++</code> and newlines with <code><br></code>:</p> <p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var textarea = document.getElementById('textarea'); var textareaPreview = document.querySelector('.textarea-preview'); var currentText; textarea.onkeyup = function(){ currentText = textarea.value; var previewAsString = "<p class='p-preview'>" + currentText.replace(/\+\+|\n/g, '<br>') + "</p>" textareaPreview.innerHTML = previewAsString; };</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>textarea { width: 300px; height: 80px; resize: vertical; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="block"> <textarea id="textarea" placeholder="Type here.."></textarea> </div> <div class="block"> <div class="textarea-preview"></div> </div></code></pre> </div> </div> </p> </div><p><a href="/javascript/">CLICK HERE</a> to find out more related problems solutions.</p> </div><!-- .entry-content .clear --> </div> </article><!-- #post-## --> <nav class="navigation post-navigation" role="navigation" aria-label="Posts"> <span class="screen-reader-text">Post navigation</span> <div class="nav-links"><div class="nav-previous"><a href="https://getcodesolution.com/r/finding-differences-between-populations/" rel="prev"><span class="ast-left-arrow">←</span> Previous Post</a></div><div class="nav-next"><a href="https://getcodesolution.com/r/top-k-values-in-each-row-of-matrix-excluding-diagonal/" rel="next">Next Post <span class="ast-right-arrow">→</span></a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/javascript/javascript-updating-value-under-certian-conditions-and-append-it-to-a/#respond" style="display:none;">Cancel Reply</a></small></h3><form action="https://getcodesolution.com/wp-comments-post.php" method="post" id="ast-commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message" aria-hidden="true">Required fields are marked <span class="required" aria-hidden="true">*</span></span></p><div class="ast-row comment-textarea"><fieldset class="comment-form-comment"><legend class ="comment-form-legend"></legend><div class="comment-form-textarea ast-grid-common-col"><label for="comment" class="screen-reader-text">Type here..</label><textarea id="comment" name="comment" placeholder="Type here.." cols="45" rows="8" aria-required="true">