Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Post History

71%

+3 −0

Q&A Adding elements to wrapper after calling wrap doesn't work

I'm trying to do some DOM manipulation in jQuery, but am having issues with creating wrapper elements. For some reason, prepending to the wrapper doesn't work after I call wrap. Code <html>...

1 answer · posted 2y ago by Moshi‭ · last activity 1y ago by Mithical‭

Question javascript jquery dom-manipulation jquery-wrap

#4: Nominated for promotion by

Alexei‭ · 2023-02-07T17:41:34Z (almost 2 years ago)

Copy Link

Raw

Markdown

#3: Post edited by

Alexei‭ · 2023-02-07T08:30:45Z (almost 2 years ago)
added relevant tags

Copy Link

Raw

Markdown

jquery dom-manipulation

javascript jquery dom-manipulation jquery-wrap

#2: Post edited by

Moshi‭ · 2023-02-07T07:47:27Z (almost 2 years ago)
Copied from a previous test version so the text didn't match, oops

Copy Link

Raw

Markdown

I'm trying to do some DOM manipulation in jQuery, but am having issues with creating wrapper elements. For some reason, prepending to the wrapper doesn't work after I call `wrap`.
## Code
```html
<html>
<body>
<p>Text</p>
</body>
</html>
```
```js
const wrapper = $('<div class="wrapper"></div>');
~~const newText = $('<p>Generated Text</p>');~~
$('p').wrap(wrapper);
wrapper.prepend(newText);
```
## Expected result
```html
<div class="wrapper">
<p>New Text</p>
<p>Text</p>
</div>
```
## Actual result
```html
<div class="wrapper">
<p>Text</p>
</div>
```
Does anyone know why this happens? I could just re-select the wrapper div, and that works, but it seems pretty inefficient.

I'm trying to do some DOM manipulation in jQuery, but am having issues with creating wrapper elements. For some reason, prepending to the wrapper doesn't work after I call `wrap`.
## Code
```html
<html>
<body>
<p>Text</p>
</body>
</html>
```
```js
const wrapper = $('<div class="wrapper"></div>');
const newText = $('<p>New Text</p>');
$('p').wrap(wrapper);
wrapper.prepend(newText);
```
## Expected result
```html
<div class="wrapper">
<p>New Text</p>
<p>Text</p>
</div>
```
## Actual result
```html
<div class="wrapper">
<p>Text</p>
</div>
```
Does anyone know why this happens? I could just re-select the wrapper div, and that works, but it seems pretty inefficient.

#1: Initial revision by

Moshi‭ · 2023-02-07T07:46:25Z (almost 2 years ago)

Copy Link

Raw

Markdown

Adding elements to wrapper after calling wrap doesn't work

I'm trying to do some DOM manipulation in jQuery, but am having issues with creating wrapper elements. For some reason, prepending to the wrapper doesn't work after I call `wrap`.

## Code

```html
<html>
<body>
  <p>Text</p>
</body>
</html>
```

```js
const wrapper = $('<div class="wrapper"></div>');
const newText = $('<p>Generated Text</p>');

$('p').wrap(wrapper);
wrapper.prepend(newText);
```

## Expected result

```html
<div class="wrapper">
  <p>New Text</p>
  <p>Text</p>
</div>
```

## Actual result

```html
<div class="wrapper">
  <p>Text</p>
</div>
```

Does anyone know why this happens? I could just re-select the wrapper div, and that works, but it seems pretty inefficient.

jquery dom-manipulation

Communities

Post History