使用innerHTML时textarea文本擦除

Question

我有一个函数，它使用innerHTML将html插入到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 = ''
             }

然后我的html

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

但是，正如您在introNewSection.innerHTML中所看到的，我有一个<textarea type="text" class="form-control" name="intro" placeholder="Enter your current Intro" id="textvalue" style="height: 100px;" required></textarea>

问题是，这个函数displayInputIntro()可以被多次触发。每次触发，文本区域中有任何文本，它就会清除它，我不知道为什么。我怎么才能解决这个问题？

Answer 1

首先，您需要正确地关闭HTML标记，不是正确地关闭，我看到的是在将html分配给innerHTML时没有关闭标记，第二，当您使用innerHTML时，它将覆盖html内容。如果您想注入html，那么使用insertAdjacentHTML标记并执行如下所示

introNewSection.insertAdjacentHTML('afterend', 'additional HTML code');

注意:您应该了解函数为什么要多次触发。