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

Searching for nested divs with the same class name in jQuery can be achieved by using the

Compiling SCSS to CSS in Vue.js is a breeze

Tips for seamlessly incorporating WalletConnect into your decentralized app with the help of web3-react

Is it possible to extract my current location from one website and then access another website based on that location?

Advantages of choosing between the <NextLink/> and the <Button href="/somePage"/> components in the powerful Mui React UI libraries

AngularJS - Create Alert Pop-Up for Missing Input Fields

Is it possible for me to utilize pure JavaScript for loading JSON data?

Clicking on text triggers image display

true not redirecting to 404 page when axios request fails

Implementing Various Conditions in ng-if Using AngularJS

Unable to locate module '.next/server/font-manifest.json'

What are the steps to achieve the desired PrimeFaces theme appearance for selectOneMenu?

Tips for displaying an HTML page using JavaScript

Learn how to eliminate all text characters from a string using jQuery, leaving only the numerical values behind

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

transitioning from font-awesome v4 to the latest version, v5

Next.JS reported that it "Executed a greater number of hooks compared to the previous render"

Using Javascript to retrieve form data from a separate file

Make Bootstrap Panel Full Width with Highcharts Data

What is the best way to pass an array through router navigate function?