如何使用 JavaScript 在 Html 页面中水平添加元素？

在某些情况下，我们需要以水平方式添加元素。例如，如果您的元素是链表节点并且您想要水平添加它们。
现在问题出现了，我们如何才能以更好的方式做到这一点。
一种方法是使用值为“inline grid”的“display”属性，如以下程序所示：
当用户单击按钮添加节点时。节点开始按顺序添加到链表中。为了实现这一点，我们创建了带有“display”属性的“div”，我们将其值设为“inline-grid”。

示例-1

javascript

  
   
   

          Inserting node  horizontally
   
   
 



 
click to insert
 

 



 

    




 


  

   

---

html

“”.
html
” 
”
html
”
”
html
“
”
javascript
 


     Inserting node  horizontally



 
click to insert
 


 



 

 






 

 

 
@keyframes addnode {
 
from {
transform: translateX(-100px);
}
 
to {
transform: translateX(200px);
}
}
 

 

var array = [];
 
var number = 1 ;
 
function insert()
{
var td = document.createElement('td');
td.innerHTML = number;
 
document.getElementById('tablerow').prepend(td);
 
td.style = 'min-width: 80px; height: 80px;
            border: 4px solid green;
            text-align: center;background: green;
            border-radius: 50%;animation-name: addnode;
            animation-duration: 2s;
            animation-direction: all;
            transition-property: transform;
            transform: translateX(200px);';
 
      array.push(number);
      number++;
 
     td.addEventListener('animationend', function() {
 
});
}
 

 

 

输出： 
代码说明——
我们创建了一个
html 
“
”
 id 为“分区”的元素，这将是我们的主要分区，我们在其中添加不同的“div”作为节点。在“insert()”函数中，我们创建了 .
 html 
“
”
这将是我们链表的元素，我们添加了一个“数字”，它从 1 开始，随着我们在列表中添加更多元素而增加。对于要水平添加的节点，我们使用了值为“inline-grid”的显示属性。
但是，这个解决方案有一个问题，当我们在某个节点之后继续在列表中添加元素时，元素开始跳转到不需要的行。这就是下面的输出中展示的内容。 
如果我们想在一行中添加每个节点怎么办？
另一种方法：
在这种方法中，为了实现我们使用的相同的东西
html 
“”.
所以，我们的想法是在一个表中我们可以创建一个表行，即html ” ”
并且为了添加每个节点，我们将创建表数据，即html ””
 .因此，将有一个“tr”，每个节点都将被视为html “”
 .因此，通过这种方式，可以通过使用表来添加无限数量的节点。我们可以通过程序看到它的实现。示例 - 2： javascript  


     Inserting node  horizontally



 
click to insert
 


 



 

 






 

 

 
@keyframes addnode {
 
from {
transform: translateX(-100px);
}
 
to {
transform: translateX(200px);
}
}
 

 

var array = [];
 
var number = 1 ;
 
function insert()
{
var td = document.createElement('td');
td.innerHTML = number;
 
document.getElementById('tablerow').prepend(td);
 
td.style = 'min-width: 80px; height: 80px;
            border: 4px solid green;
            text-align: center;background: green;
            border-radius: 50%;animation-name: addnode;
            animation-duration: 2s;
            animation-direction: all;
            transition-property: transform;
            transform: translateX(200px);';
 
      array.push(number);
      number++;
 
     td.addEventListener('animationend', function() {
 
});
}
 

 

 输出插入多个节点后

                

            
        
    



  

    
        Copyright © 2020 - 2024 版权所有
            

            蜀ICP备20006366号-1

            
            Made with ❤️ in Chengdu