文章/答案/技术大牛

发布

社区首页 >问答首页 >在innerhtml插入时，textarea被清除。

问在innerhtml插入时，textarea被清除。
EN

Stack Overflow用户

提问于 2022-07-15 16:47:06

回答 1查看 35关注 0票数 -1

我有一个页面，用户可以从下拉菜单中选择。当他们单击下拉菜单中的选项时，新的部分将被插入到行中。

下面是下拉列表：

<ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable">
                        <li><a class="dropdown-item border-radius-md" id="tx1" href="javascript: void(0)" onclick="displayInputtx1()">tx1</a></li>
                        <li><a class="dropdown-item border-radius-md" id="lj1" href="javascript: void(0)" onclick="displayInputPrelj1()">lj1</a></li>
                        <li><a class="dropdown-item border-radius-md" id="jo1" href="javascript: void(0)" onclick="displayInputjo1()">jo1</a></li>
                        <li><a class="dropdown-item border-radius-md" id="pr1" href="javascript: void(0)" onclick="displayInputpr1()">pr1</a></li>
                        <li><a class="dropdown-item border-radius-md" id="cf1" href="javascript: void(0)" onclick="displayInputcf1()">cf1</a></li>
                      </ul>

例如，当我单击tx1时，这个脚本运行：

             function tx1() {
                var submitbutton = document.getElementById('submitbutton')
                var intro = document.getElementById('tx1') 
                var introNewSection = document.getElementById('tx1-row')
                var uniqueID = ""
                var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                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="intro" style="height: 100px;" required></textarea> </div> </div> </div> </div> </div>'
                submitbutton.style.display = ''
             }

此函数将一个新部分插入到div中。

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

但是用户可以多次调用这个函数，因为他们也应该能够。问题是，每当用户单击现有的新tx1部分时，如果他们在新部分的textarea中编写了任何内容，则会清除任何文本的部分，然后在其旁边添加一个新的空白部分。

我不知道为什么会发生这种事。有人能提供更多的洞察力和/或帮助吗？！

javascript

html

回答 1

Stack Overflow用户

发布于 2022-07-15 17:36:14

Use javascript .appendChild function, to add the new node or html element al DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <body>
    <div id="mydiv">
    </div>
    <p>
      Click "Append"
    </p>
    <button onclick="myFunction()">
      Append
    </button>

    <script>
      function myFunction() {

        // Create an "textarea" node:
        const node = document.createElement("textarea");

        // Create a text node:
        const textnode = document.createTextNode("Water");

        // Append the text node to the "textarea" node:
        node.appendChild(textnode);

        // Append the "textarea" node to the div element:
        document.getElementById("mydiv").appendChild(node);
      }
    </script>
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72997288

复制

相似问题

问在innerhtml插入时，textarea被清除。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在innerhtml插入时，textarea被清除。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在innerhtml插入时，textarea被清除。
EN