Как с помощью jQuery добавить один элемент к другому перед существующим контентом?

Question

Мое дерево DOM выглядит так:

<body>
  <div>
    **insert new p here**
    <p></p>
  </div>
</body>

Как мне добавить элемент в div, чтобы он всегда появлялся перед начальным элементом p и, следовательно, накладывался поверх последующих элементов p?

jquery html

1

My Name 8 Мар 2015 в 18:47

Answer 1

Если вы просто хотите, чтобы вставленный <p></p> был первым дочерним элементом <div></div>, вы можете использовать .prepend (). В вашем случае это будет выглядеть так:

<body>
  <div id="paras">
    <p>World</p>
  </div>

  <script src="path/to/jquery"></script>
  <script type="text/javascript">
    $('#paras').prepend('<p>Hello</p>');
  </script>
</body>

Если на самом деле вы просто хотите поместить его выше этого <p></p> и над ним будут другие элементы, вам следует использовать ответ Никэля.

2

pzp 8 Мар 2015 в 15:58

Answer 2

Есть несколько вариантов, помимо уже перечисленных; для полноты (или насколько я могу понять):

JQuery:

Использование prepend():

// creates a new <p> element
var newElement = $('<p>', {
  // sets its text to 'Hello'
  // (internally using the text() method):
  'text' : 'Hello'
});

// sets prepends the created-<p> to the
// elements matched by the selector:
$('div').prepend(newElement);

var newElement = $('<p>', {
  'text': 'Hello'
});

$('div').prepend(newElement);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <!-- insert new p here -->
  <p>
    World
  </p>
</div>

Использование prependTo():

$('<p>', {
  'text' : 'Hello'
// prepending to the each <div> element:
}).prependTo('div');

$('<p>', {
  'text': 'Hello'
}).prependTo('div');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <!-- insert new p here -->
  <p>
    World
  </p>
</div>

Использование before():

var newElement = $('<p>', {
  'text' : 'Hello'
});

// inserts the created-<p> before all elements
// matched by the selector:
$('p').before(newElement);

var newElement = $('<p>', {
  'text': 'Hello'
});

$('p').before(newElement);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <!-- insert new p here -->
  <p>
    World
  </p>
</div>

JavaScript:

Использование parentNode.insertBefore():

// creating a <p> element:
var newElement = document.createElement('p'),
  // reference to the (first) <div> element in
  // the document:
  div = document.querySelector('div');

// setting the textContent of the created-<p>:
newElement.textContent = 'Hello';

// inserting the created-<p> element before the
// firstChild of the <div> element we found (above):
div.insertBefore(newElement, div.firstChild);

var newElement = document.createElement('p'),
  div = document.querySelector('div');
newElement.textContent = 'Hello';

div.insertBefore(newElement, div.firstChild);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <!-- insert new p here -->
  <p>
    World
  </p>
</div>

Использование Node.insertAdjacentHTML():

// finding the first <p> element in the document:
var p = document.querySelector('p');

// inserting the supplied HTML string before
// that found-<p> element,
// strings:
//  'beforebegin': before the element itself,
//  'afterbegin': before the first existing child-node,
//  'beforeend': after the last existing child-node,
//  'afterend': after the element itself:
p.insertAdjacentHTML('beforebegin', '<p>Hello</p>');

var p = document.querySelector('p');

p.insertAdjacentHTML('beforebegin', '<p>Hello</p>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <!-- insert new p here -->
  <p>
    World
  </p>
</div>

Снова используя Node.insertAdjacentHTML(), но с 'afterbegin'

// finding the first <div> element in the document:
var div = document.querySelector('div');

// inserting the supplied HTML inside of the found <div>,
// before its existing content:
div.insertAdjacentHTML('afterbegin', '<p>Hello</p>');

var div = document.querySelector('div');

div.insertAdjacentHTML('afterbegin', '<p>Hello</p>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <!-- insert new p here -->
  <p>
    World
  </p>
</div>

Ссылки:

JavaScript:
jQuery:
- before().
- insertBefore().
- prepend().
- prependTo().

0

David says reinstate Monica 8 Мар 2015 в 16:46

Answer 3

В случае, если вы добавите новые <p> теги, будет много тегов <p>, поэтому я рекомендую вам присвоить ему идентификатор.

Например.:

<body>
  <div>
**insert new p here**
   <p id="main">
   </p>
  </div>
</body>

Тогда код будет:

$( "<p>something there</p>" ).insertBefore( "p#main" );

0

nicael 8 Мар 2015 в 15:54

Как с помощью jQuery добавить один элемент к другому перед существующим контентом?

3 ответа

JQuery:

JavaScript:

Похожие вопросы

Новые вопросы

jquery