blocks|key|679659|text|我认为您正在寻找jQuery中的.prepend函数。示例代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|679660|$("#E").prepend("Code+goes+here,+yo!");|code-block|syntax|javascript|679661|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Manipulation/prepend^0|G|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I think you're looking for the <a href="http://docs.jquery.com/Manipulation/prepend" rel="nofollow noreferrer">.prepend</a> function in jQuery. Example code:

<pre><code>$("#E").prepend("&lt;p&gt;Code goes here, yo!&lt;/p&gt;");
</code></pre>

blocks|key|678990|text|除非我误解了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|678991|$("e").prepend("<yourelem>Text</yourelem>");|code-block|syntax|javascript|678992|或|678993|$("<yourelem>Text</yourelem>").prependTo("e");|678994|虽然从你的描述中听起来像是附加了一些条件，所以|678995|if+(SomeCondition){
++++$("e").prepend("<yourelem>Text</yourelem>");
}
else{
++++$("e").append("<yourelem>Text</yourelem>");
}|678996|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Unless I have misunderstood:

<pre><code>$("e").prepend("&lt;yourelem&gt;Text&lt;/yourelem&gt;");
</code></pre>

Or

<pre><code>$("&lt;yourelem&gt;Text&lt;/yourelem&gt;").prependTo("e");
</code></pre>

Although it sounds like from your description that there is some condition attached, so

<pre><code>if (SomeCondition){
 $("e").prepend("&lt;yourelem&gt;Text&lt;/yourelem&gt;");
}
else{
 $("e").append("&lt;yourelem&gt;Text&lt;/yourelem&gt;");
}
</code></pre>

blocks|key|1980033|text|var+eElement;+//+some+E+DOM+instance
var+newFirstElement;+//element+which+should+be+first+in+E

eElement.insertBefore(newFirstElement,+eElement.firstChild);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1980034|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);
</code></pre>

blocks|key|679002|text|你可以在你所有的窗口html元素中直接实现它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|679003|如下所示：|679004|HTMLElement.prototype.appendFirst+=+function(childNode)+{
++++if+(this.firstChild)+{
++++++++this.insertBefore(childNode,+this.firstChild);
++++}
++++else+{
++++++++this.appendChild(childNode);
++++}
};|code-block|syntax|javascript|679005|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can implement it directly i all your window html elements. 
Like this :
<pre><code>HTMLElement.prototype.appendFirst = function(childNode) {
 if (this.firstChild) {
 this.insertBefore(childNode, this.firstChild);
 }
 else {
 this.appendChild(childNode);
 }
};
</code></pre>

blocks|key|2234671|text|被接受的答案被重构为一个函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2234672|function+prependChild(parentEle,+newFirstChildEle)+{
++++parentEle.insertBefore(newFirstChildEle,+parentEle.firstChild)
}|code-block|syntax|javascript|2234673|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Accepted answer refactored into a function:

<pre><code>function prependChild(parentEle, newFirstChildEle) {
 parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
</code></pre>

blocks|key|826596|text|2017版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|826597|您可以使用|826598|targetElement.insertAdjacentElement('afterbegin',+newFirstElement)|code-block|syntax|javascript|826599|来自MDN：|offset|length|826600|826601|+insertAdjacentElement()方法将给定的元素节点插入到相对于调用它的元素的给定位置。|blockquote|826602|826603|位置|style|BOLD|826604|表示相对于元素的位置的DOMString；必须是以下字符串之一：|826605|beforebegin：在元素本身之前。|CODE|826606|afterbegin：就在元素内部，在它的第一个子元素之前。|826607|beforeend：就在元素内部，在它的最后一个子元素之后。|826608|afterend：在元素本身之后。元素|826609|要插入到树中的元素。|826610|826611|在insertAdjacent家族中还有兄弟方法：|826612|直接注入html字符串的element.insertAdjacentHTML('afterbegin','htmlText')，像innerHTML一样，但不会覆盖所有的东西，所以你可以跳过document.createElement的压抑过程，甚至用字符串操作过程来构建整个组件|826613|用于将清理字符串注入元素的element.insertAdjacentText。不再有encode/decode|826614|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement^0|0|0|0|2|3|0|0|0|0|0|0|2|0|0|0|B|0|0|A|0|0|9|0|0|8|H|2|0|0|0|1|E|0|C|1F|1T|9|2N|M|0|D|Q|17|D|0^^$0|@$1|2|3|4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1Q|8|@]|9|@$K|1R|L|1S|1|1T]]|A|$]]|$1|M|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1V|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1X|8|@$K|1Y|L|1Z|T|U]]|9|@]|A|$]]|$1|V|3|W|5|6|7|20|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|21|8|@$K|22|L|23|T|Z]]|9|@]|A|$]]|$1|10|3|11|5|6|7|24|8|@$K|25|L|26|T|Z]]|9|@]|A|$]]|$1|12|3|13|5|6|7|27|8|@$K|28|L|29|T|Z]]|9|@]|A|$]]|$1|14|3|15|5|6|7|2A|8|@$K|2B|L|2C|T|Z]|$K|2D|L|2E|T|U]]|9|@]|A|$]]|$1|16|3|17|5|6|7|2F|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2H|8|@$K|2I|L|2J|T|Z]]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|2K|8|@$K|2L|L|2M|T|Z]|$K|2N|L|2O|T|Z]|$K|2P|L|2Q|T|Z]]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|2R|8|@$K|2S|L|2T|T|Z]|$K|2U|L|2V|T|Z]]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|2W|8|@]|9|@]|A|$]]]|1G|$1H|$5|1I|1J|1K|A|$1L|1M]]]]

<h1>2017 version</h1>

You can use 

<pre><code>targetElement.insertAdjacentElement('afterbegin', newFirstElement)
</code></pre>

From <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement" rel="noreferrer">MDN</a> :

<blockquote>
 The insertAdjacentElement() method inserts a given element node at a given position relative to the element it is invoked upon.
 
 position 
 A DOMString representing the position relative to the element; must be one of the following strings: 
 <code>beforebegin</code>: Before the element itself. 
 <code>afterbegin</code>: Just inside the element, before its first child. 
 <code>beforeend</code>: Just inside the element, after its last child. 
 <code>afterend</code>: After the element itself. 
 
 element 
 The element to be inserted into the tree.
</blockquote>

Also in the family of <code>insertAdjacent</code> there is the sibling methods: 

<code>element.insertAdjacentHTML('afterbegin','htmlText')</code> for inject html string directly, like <code>innerHTML</code> but without overide everything , so you can jump oppressive process of <code>document.createElement</code> and even build whole componet with string manipulation process

<code>element.insertAdjacentText</code> for inject sanitize string into element . no more <code>encode/decode</code>

blocks|key|2234740|text|2018版本-+prepend|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2234741|parent.prepend(newChild)++//+[newChild,+child1,+child2]|code-block|syntax|javascript|2234742|这就是现代的JS！它比以前的选项更具可读性。它目前在Chrome、FF和Opera中可用。|2234743|添加到末尾的等价物是append，它替换了旧的appendChild|2234744|parent.append(newChild)++//+[child1,+child2,+newChild]|2234745|高级用法|2234746|字符串值您可以传递多个值(或使用扩展运算符...).|2234747|Any+|unordered-list-item|2234748|值将作为文本元素添加。|ordered-list-item|2234749|2234750|2234751|示例：|BOLD|2234752|parent.prepend(newChild,+"foo")+++//+[newChild,+"foo",+child1,+child2]

const+list+=+["bar",+newChild]
parent.append(...list,+"fizz")++++//+[child1,+child2,+"bar",+newChild,+"fizz"]|2234753|相关的DOM方法|2234754|2234755|Read+More+-+child.replaceWith|2234756|和child.after|2234757|Read+More+-+child.before|2234758|2234759|Mozilla+Documentation|2234760|Can+I+Use|2234761|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/45656649/974045|1|https://stackoverflow.com/a/40444300/974045|2|https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/prepend|3|https://caniuse.com/#feat=dom-manip-convenience^0|8|7|0|0|0|A|6|N|B|0|0|0|L|3|0|0|0|0|0|0|3|0|0|0|0|C|H|0|9|0|0|1|B|0|C|C|0|9|1|0|0|0|L|2|0|0|9|3|0^^$0|@$1|2|3|4|5|6|7|1Z|8|@$9|20|A|21|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|22|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|23|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|24|8|@$9|25|A|26|B|C]|$9|27|A|28|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|29|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|2A|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|2B|8|@$9|2C|A|2D|B|C]]|D|@]|E|$]]|$1|U|3|V|5|W|7|2E|8|@]|D|@]|E|$]]|$1|X|3|Y|5|Z|7|2F|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|2G|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|2H|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|2I|8|@$9|2J|A|2K|B|14]]|D|@]|E|$]]|$1|15|3|16|5|H|7|2L|8|@]|D|@]|E|$I|J]]|$1|17|3|18|5|6|7|2M|8|@]|D|@]|E|$]]|$1|19|3|-4|5|6|7|2N|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|Z|7|2O|8|@$9|2P|A|2Q|B|C]]|D|@$9|2R|A|2S|1|2T]]|E|$]]|$1|1C|3|1D|5|6|7|2U|8|@$9|2V|A|2W|B|C]]|D|@]|E|$]]|$1|1E|3|1F|5|W|7|2X|8|@$9|2Y|A|2Z|B|C]]|D|@$9|30|A|31|1|32]]|E|$]]|$1|1G|3|-4|5|6|7|33|8|@]|D|@]|E|$]]|$1|1H|3|1I|5|6|7|34|8|@]|D|@$9|35|A|36|1|37]]|E|$]]|$1|1J|3|1K|5|6|7|38|8|@]|D|@$9|39|A|3A|1|3B]]|E|$]]|$1|1L|3|-4|5|6|7|3C|8|@]|D|@]|E|$]]]|1M|$1N|$5|1O|1P|1Q|E|$1R|1S]]|1T|$5|1O|1P|1Q|E|$1R|1U]]|1V|$5|1O|1P|1Q|E|$1R|1W]]|1X|$5|1O|1P|1Q|E|$1R|1Y]]]]

<h1>2018 version - <code>prepend</code></h1>
<pre><code>parent.prepend(newChild) // [newChild, child1, child2]
</code></pre>
This is modern JS! It is more readable than previous options. It is currently available in Chrome, FF, and Opera.
The equivalent for adding to the end is <code>append</code>, replacing the old <code>appendChild</code>
<pre><code>parent.append(newChild) // [child1, child2, newChild]
</code></pre>
<h2>Advanced usage</h2>
<ol>
<li>You can pass multiple values (or use spread operator <code>...</code>).</li>
<li>Any string value will be added as a text element.</li>
</ol>
Examples:
<pre><code>parent.prepend(newChild, &quot;foo&quot;) // [newChild, &quot;foo&quot;, child1, child2]

const list = [&quot;bar&quot;, newChild]
parent.append(...list, &quot;fizz&quot;) // [child1, child2, &quot;bar&quot;, newChild, &quot;fizz&quot;]
</code></pre>
<h2>Related DOM methods</h2>
<ol>
<li><a href="https://stackoverflow.com/a/45656649/974045">Read More</a> - <code>child.before</code> and <code>child.after</code></li>
<li><a href="https://stackoverflow.com/a/40444300/974045">Read More</a> - <code>child.replaceWith</code></li>
</ol>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/prepend" rel="noreferrer">Mozilla Documentation</a>
<a href="https://caniuse.com/#feat=dom-manip-convenience" rel="noreferrer">Can I Use</a>

blocks|key|1980096|text|我创建这个原型是为了将元素预先添加到父元素中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1980097|Node.prototype.prependChild+=+function+(child:+Node)+{
++++this.insertBefore(child,+this.firstChild);
++++return+this;
};|code-block|syntax|javascript|1980098|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I created this prototype to prepend elements to parent element.

<pre><code>Node.prototype.prependChild = function (child: Node) {
 this.insertBefore(child, this.firstChild);
 return this;
};
</code></pre>

blocks|key|2234783|text|var+newItem+=+document.createElement("LI");+++++++//+Create+a+<li>+node
var+textnode+=+document.createTextNode("Water");++//+Create+a+text+node
newItem.appendChild(textnode);++++++++++++++++++++//+Append+the+text+to+<li>

var+list+=+document.getElementById("myList");++++//+Get+the+<ul>+element+to+insert+a+new+node
list.insertBefore(newItem,+list.childNodes[0]);++//+Insert+<li>+before+the+first+child+of+<ul>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2234784|https://www.w3schools.com/jsref/met_node_insertbefore.asp|unstyled|offset|length|2234785|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1L|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Q|8|@]|9|@$G|R|H|S|1|T]]|A|$]]|$1|I|3|-4|5|F|7|U|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|E]]]]

<pre><code>var newItem = document.createElement("LI"); // Create a &lt;li&gt; node
var textnode = document.createTextNode("Water"); // Create a text node
newItem.appendChild(textnode); // Append the text to &lt;li&gt;

var list = document.getElementById("myList"); // Get the &lt;ul&gt; element to insert a new node
list.insertBefore(newItem, list.childNodes[0]); // Insert &lt;li&gt; before the first child of &lt;ul&gt;
</code></pre>

<a href="https://www.w3schools.com/jsref/met_node_insertbefore.asp" rel="nofollow noreferrer">https://www.w3schools.com/jsref/met_node_insertbefore.asp</a>

I have element E and I'm appending some elements to it. All of a sudden, I find out that the next element should be the first child of E. What's the trick, how to do it? Method unshift doesn't work because E is an object, not array. 

Long way would be to iterate trough E's children and to move'em key++, but I'm sure that there is a prettier way.

How to set DOM element as the first child?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有元素E，并且我在它上面附加了一些元素。突然，我发现下一个元素应该是E的第一个孩子。诀窍是什么，怎么做？方法unshift不起作用，因为E是一个对象，而不是数组。还有很长的路要走，那就是通过遍历E的子节点并将它们移动到key++，但我相信还有更好的方法。

问如何将DOM元素设置为第一个子元素？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将DOM元素设置为第一个子元素？EN