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

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

我的问题是，由于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>

或此方法：

.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;
}

如果有人知道如何定位文本区域，使其保持在选项卡内，或者有关于方向的提示，请让我知道！ 这里有一张图片让你知道我的意思

选项卡\u不工作：

---

丹诺让我走上了正确的道路。我让它工作了：

<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>

函数myFunction（）{
var x=document.createElement（“TEXTAREA”）；
var t=document.createTextNode（“dano”）将我放在正确的路径上。我让它工作：

<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>


函数myFunction（）{
var x=document.createElement（“TEXTAREA”）；
var t=document.createTextNode（“您正在将新的
元素附加到
正文
。请将它们附加到选项卡容器中。谢谢，但我一定缺少正确的表达式。我尝试了以下表达式：document.order.appendChild（x）；，document，tabContent.order.appendChild（x）；document.body.appendChild（x）.tabContent.order；document.body.tabContent.order.appendChild（x）；我无法让任何一个都起作用。我接近正确的表达式了？谢谢Dan O！你让我走上了正确的道路！！我终于让它起作用了！你是个天才Dan O！我终于让它起作用了：function myFunction（）{var x=document.createElement（“TEXTAREA”）；var t=document.createTextNode（“”）；x.appendChild（t）；document.getElementById（“order”）.appendChild（x）；setTimeout（myFunction，9000）；}您正在将新的
元素附加到
正文
中。请改为将它们附加到选项卡容器中。谢谢，但我一定缺少正确的表达式。我尝试了以下表达式：document.order.appendChild（x）；document，tabContent.order.appendChild（x）；document.body.appendChild（x）.tabContent.order；document.body.tabContent.order.appendChild（x）；我无法让任何一个都起作用。我接近正确的表达式了？谢谢Dan O！你让我走上了正确的道路！！我终于让它起作用了！你是个天才Dan O！我终于让它起作用了：function myFunction（）{var x=document.createElement（“TEXTAREA”）；var t=document.createTextNode（“”）；x.appendChild（t）；document.getElementById（“order”）.appendChild（x）；setTimeout（myFunction，9000）；}