Is is possible javascript function to return new DOM element but created with jQuery

Question

Example:

function getNewElement(elementName, elementClass) {
    return $('<p>')
        .addClass(elementClass)
        .text(elementName);
}

And then i can reuse it like:

const paragraph = getNewElement('test', 'some-class');
const paragraphSecond = getNewElement('test2', 'some-class2');

Is there any way to run the code or any similar approach ? Thanks

Rory McCrossan · Accepted Answer · 2019-07-08 15:08:47Z

5

The 0th item in a jQuery object is the native DOM Element object. As such just add [0] to the return statement in your function to get your desired output:

function getNewElement(elementName, elementClass) {
  return $('<p>').addClass(elementClass).text(elementName)[0];
}

const paragraph = getNewElement('test', 'some-class');
console.dir(paragraph);

const paragraphSecond = getNewElement('test2', 'some-class2');
console.dir(paragraphSecond);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

That being said, there's nothing inherently wrong with returning a jQuery object from the function which will stop it from being re-used. Any problem would only come from how you use the result of the function in later logic.

answered Jul 8, 2019 at 15:08

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arthur Almeida · Accepted Answer · 2019-07-08 15:13:21Z

1

you could create the element using the following approach:

function getNewElement(elementName, elementClass) {
    return $(document.createElement("p"))
        .addClass(elementClass)
        .text(elementName)
        .get(0);
}

edited Jul 8, 2019 at 15:13

answered Jul 8, 2019 at 15:09

Arthur Almeida

5682 silver badges8 bronze badges

2 Comments

Arthur Almeida Over a year ago

oh sorry, I misread the title.. I have updated with the correct code

fdomn-m Over a year ago

$(document.createElement("p")) seems superfluous

Lajos Arpad · Accepted Answer · 2019-07-09 12:17:59Z

0

The function below generates a tag and returns it:

function getNewElement(elementName, elementClass, tagName = "p") {
  return $('<'+tagName+'>').addClass(elementClass).text(elementName)[0];
}

edited Jul 9, 2019 at 12:17

Lajos Arpad

80.4k42 gold badges123 silver badges234 bronze badges

answered Jul 8, 2019 at 15:10

Ogie

1,3322 gold badges14 silver badges18 bronze badges

1 Comment

Rory McCrossan Over a year ago

Note that in the case of the OP this would return a <test> or <test2> element, not a <p> element

Collectives™ on Stack Overflow

Is is possible javascript function to return new DOM element but created with jQuery

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related