javascript - 在格式化网站的 javascript 编码选项卡中定位计时器创建的文本区域，该文本区域在计时器上重复

Question

我在 WAMP 服务器上有一个网站 (html/css/javascript/php)。格式为标题。导航(左侧)，部分(导航 div 右侧)。在本节中，我有一个 javascript 3 选项卡容器。我从 .php 文件中提取信息并在文本区域中显示检索到的数据。文本区域位于计时器上，因此每次检索新数据时，都会在当前文本区域下方使用新数据创建一个新文本区域。

我的问题是，由于 Javascript 最后加载到页面中，因此文本区域位于选项卡式 div 容器之外，并跨越所有边界和边框。

如何定位新创建的文本区域，以便它们出现并保留在第一个选项卡内？这是我迄今为止使用的代码。我尝试了很多解决方案，但都不起作用，甚至绝对定位也不起作用。

<div id="section">

    <!-- these are the tags ID and the href links back to itself, the page does not navigate forward or backward-->
<ul id="tabs">
  <li><a href="#order">.........Orders Placed</a></li>
  <li><a href="#delivered">.......Delivered</a></li>
  <li><a href="#cancelled">.......Cancelled</a></li>
</ul>


<div class="tabContent" id="order" style="max-height:800px;overflow-y:scroll;border:1px solid red;">
     <div>
      <button onclick="myFunction()">Try it</button>
    <script type="text/javascript" >
    function myFunction() {
        var x = document.createElement("TEXTAREA");
        var t = document.createTextNode("<?php include('NewIncomingOrders.php')?>");
        x.appendChild(t);
        document.body.appendChild(x);
        setTimeout(myFunction, 9000);
        }

    </script>

     </div>

</div>

和我尝试过的CSS:比这里的方式更多，但我无法让它们中的任何一个工作。我的代码中包含一个按钮来启动定时功能。

TEXTAREA{      
      width:80em;
      height:4em;
      border: 1px solid #FFFFFF;
      position:static;
      left: 195px; 
      top: 1px;      
    }

或者这个方法:

.section{
    position:relative;
    height:200px;
    width:400px;
    background-color:blue;
}

.tabContent{
    position:absolute;
    bottom:2px;
    left:2px;
    right:2px;
}
.tabContent textarea{
    width:100%;
    height:30px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

如果有人知道如何定位文本区域以使其保持在选项卡内，或者提示要走的方向，请告诉我! 这是一张图片，让您明白我的意思。

Tab_Not_Working:

Answer 1

Dan O 让我走上了正确的道路。我成功了:

<script type="text/javascript" > 
   function myFunction() { 
     var x = document.createElement("TEXTAREA");
     var t = document.createTextNode("<?php include('NewIncomingOrders.php')>"); 
     x.appendChild(t);
     document.getElementById("order").appendChild(x);
     setTimeout(myFunction, 9000);
   }
</script>