Employing jQuery to add an element as a sibling rather than a child node

Question

Employing jQuery to add an element as a sibling rather than a child node

I'm having trouble finding the specific functionality I need. My goal is to add sibling DOM elements to a disconnected node.

From what I gather, it should be possible with either .after() or .add(), but for some reason both methods are not working as expected:

var $set = $('<div class="parent"></div>');
    $set.add('<div class="child"></div>');
    $set.add('<div class="child"></div>');
    $set.add('<div class="child"></div>');
$('body').append($set);

http://jsfiddle.net/kh9Uj/17/ and http://jsfiddle.net/kh9Uj/19/

When I chain the .add() method, like this:

$('<div class="parent"></div>')
    .add('<div class="child"></div>')
    .add('<div class="child"></div>')
    .add('<div class="child"></div>')
.appendTo('body');

http://jsfiddle.net/kh9Uj/23/

However, chaining does not work with .after(). Unfortunately, in my application, chaining is not an option. How can I achieve this?

Edit made to correct the class/id issue.

javascript jquery html css

Answer 1

Answer №1

The variable does not get updated by the set operation.

var $set = $('<div id="parent">0</div>');
$set = $set.add('<div id="child1">1</div>');
$set = $set.add('<div id="child2">2</div>');
$set = $set.add('<div id="child3">3</div>');
$('body').append($set);

Chaining is effective because all elements are added to the same object.

var $set = $('<div id="parent">0</div>')          
               .add('<div id="child1">1</div>')   
               .add('<div id="child2">2</div>')   
               .add('<div id="child3">3</div>');
$('body').append($set);

However, using add places elements as "siblings" when appended.

<parent />
<child1 />
<child2 />
<child3 />

If you want the "child" elements to be children of "parent," use append instead.

var $set = $('<div id="parent">0</div>');
$set.append('<div id="child1">1</div>');
$set.append('<div id="child2">2</div>');
$set.append('<div id="child3">3</div>');
$('body').append($set);

This will result in:

<parent>
    <child1 />
    <child2 />
    <child3 />
</parent>

Answer 2

The variable does not get updated by the set operation.

var $set = $('<div id="parent">0</div>');
$set = $set.add('<div id="child1">1</div>');
$set = $set.add('<div id="child2">2</div>');
$set = $set.add('<div id="child3">3</div>');
$('body').append($set);

Chaining is effective because all elements are added to the same object.

var $set = $('<div id="parent">0</div>')          
               .add('<div id="child1">1</div>')   
               .add('<div id="child2">2</div>')   
               .add('<div id="child3">3</div>');
$('body').append($set);

However, using add places elements as "siblings" when appended.

<parent />
<child1 />
<child2 />
<child3 />

If you want the "child" elements to be children of "parent," use append instead.

var $set = $('<div id="parent">0</div>');
$set.append('<div id="child1">1</div>');
$set.append('<div id="child2">2</div>');
$set.append('<div id="child3">3</div>');
$('body').append($set);

This will result in:

<parent>
    <child1 />
    <child2 />
    <child3 />
</parent>

Employing jQuery to add an element as a sibling rather than a child node

Answer №1

Similar questions

Add additional code to each link within a specified div element

Issue with Angular Reactive form: Checkbox checked property not binding correctly when the page initially loads

A valid path is required in the form of a string when working with the HTTP module in Node.js

Java Selenium Javascript executor fails to return desired result

The justify-between utility in Tailwind is malfunctioning

Steps for designing a complete background picture

Is it possible for the JavaScript DOM API to retrieve the exact casing of attribute and tag names?

Node.js: Extract the object's name and value that are sent from the frontend

Utilizing .env Variables in NestJS Main App Module for Establishing Database Connection

Managing Events in PHP

When attempting to parse a JSON feed with jQuery and innerHTML, the data fails to display

A step-by-step guide on smoothly transitioning between elements using Vue-Carousel on a click event

I currently have a form within a div that is part of a loop to showcase saved data. My objective is to identify any changes made in the form fields so I can detect them effectively

Tips for preserving CSS styling following a hover event

Tips for integrating Server-Side Rendering into an already established React.js app running on Express.js

When jQuery adds elements, their response to the .click(function() function can be quite unpredictable

Is there a way to ensure that an image is always smaller than the section it resides in?

The error message states: "change is not defined"

Vue.js: SCSS @import being overlooked

Display problem with Backbone view