我已经用Java脚本创建了一个div,显示正确,但是它不在我想要的地方,我想把它放在一个容器里作为第一个元素.我不是很好,我正在努力学习,所以很抱歉这个问题很琐碎.

如何将我创建的div放入已有的容器中作为第一个元素?

除此之外,我想了解操作的逻辑,例如,如何将新的div作为最后一个元素移动?或者作为第二要素?

This is the Js code

// Add New Element
var newEl = document.createElement("div");
var text = document.createTextNode("Hello");
   newEl.appendChild(text);
   var element = document.getElementById("main_container");
   element.appendChild(newEl);

This is what I am trying to achieve

<div id="main_container" class="something">
   <div class="new_element">Hello</div>
   <div class="item">One</div>
   <div class="item">Two</div>
   <div class="item">Three</div>
</div>

This is what I got for now

<div id="main_container" class="something">
   <div class="item">One</div>
   <div class="item">Two</div>
   <div class="item">Three</div>
</div>
<div>Hello</div>

推荐答案

const parent;
const newFirstChild;
parent.insertBefore(newFirstChild, parent.firstChild);

在您的 case 中:

element.insertBefore(newEl, element.firstChild)

如果要在不同的索引处插入,可以这样做:

parent.insertBefore(newEl, parent.children[2])

Codepen

Javascript相关问答推荐

当作为表达式调用时,如何解析方法decorator 的签名?

将现场录音发送到后端

Angular 中的类型错误上不存在获取属性

我可以使用空手道用户界面来获取网页的当前滚动位置吗?

material UI按钮组样式props 不反射

根据一个条件,如何从处理过的数组中移除一项并将其移动到另一个数组?

向数组中的对象添加键而不改变原始变量

从逗号和破折号分隔的给定字符串中查找所有有效的星期几

在JS/TS中将复杂图形转换为数组或其他数据 struct

如何在Reaction中清除输入字段

我的NavLink活动类在REACT-ROUTER-V6中出现问题

有角粘桌盒阴影

使用Java脚本在div中创建新的span标记

react :图表负片区域不同 colored颜色

在两个数组范围中输入日期范围

动画可以在Chrome上运行,但不能在Safari上运行

从D3 v3更新,没有错误,但输出SVG路径不可见

Chart.js根据 Select 显示数据

从对象数组上载图像(多个)

如何改变Extra Reducers内部另一个减速器的状态?