Question

我想知道如何使用jQuery在另一个之前插入HTML元素。能够从输入中获取新元素的内容也很重要。类似的东西，但工作：

 var input = $("#theInput").val();

 var content = document.createElement("p");

 content.appendChild(document.createTextNode(input));

 $("div").insertBefore(content);

Answer 1

试试这个：

$("div").prepend(content);

Answer 2

见下面的例子：

HTML结构：

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
</div>

Jquery的：

$( ".inner" ).before( "<p>Test</p>" );

结果（HTML）：

<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
</div>

修改

请参阅下面的示例，它从文本框中取值并在
之前插入
HTML结构：

<div id="content"> <input type="text" value="textboxvalue" > <br/><br/> <span>Insert text box value befor this one</span> </div>

JQUERY：

var inputval = $("#content input").val(); $( "#content span" ).before( "<p>" + inputval + "</p>" );

Answer 3

JSFIDDLE

选项1 - 只使用jQuery：

var input = $("#theInput").val();
$("<p />")                       // Create a paragraph element.
    .text( input )               // Set the text inside the paragraph to your input.
    .insertBefore( $( "div" ) ); // Insert the paragraph before the div element(s).

选项2 - 修改代码：

var input = $("#theInput").val(),
    content = document.createElement("p");
content.appendChild(document.createTextNode(input));
$( content ).insertBefore( $( "div" ) );

选项2a - 或者您可以将最后一行更改为：

$( "div" ).before( content );

在另一个jQuery之前插入一个HTML元素

3 个答案: