Tengo esta función que usa innerHTML para insertar html en un div :

 function displayInputIntro() { var submitbutton = document.getElementById('submitbutton') var intro = document.getElementById('Intro') var introNewSection = document.getElementById('intro-row') var uniqueID = "" var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; var length = 7 for (var i = length; i > 0; --i) uniqueID += chars[Math.floor(Math.random() * chars.length)]; uniqueID = uniqueID introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id=' + uniqueID + '><div class="card z-index-2"> <div class="card-body p-3" style="margin-top: -20px;"> <h6 class="ms-2 mt-4 mb-0">Intro <a href="#" onclick="javascript:deleteInput(' + uniqueID + ')" style="text-align: right; float: right; margin-right: 12px;"><i class="fa fa-times" style="color: gray;"></i></a></h6> <p class="text-sm ms-2">Section 1</p> <div class="container border-radius-lg"> <div class="row"> <textarea type="text" class="form-control" name="intro" placeholder="Enter your current Intro" id="textvalue" style="height: 100px;" required></textarea> </div> </div> </div> </div></div>' submitbutton.style.display = '' }

y luego mi html :

 <div class="row mt-4" id="intro-row"></div>

sin embargo, como puede ver en introNewSection.innerHTML , tengo un <textarea type="text" class="form-control" name="intro" placeholder="Enter your current Intro" id="textvalue" style="height: 100px;" required></textarea>

el problema es que esta función displayInputIntro() puede activarse varias veces. Cada vez que se activa y hay texto dentro del área de texto, simplemente lo borra y no sé por qué. ¿Cómo puedo arreglar esto?