Create a jQuery function with custom paragraph-text

Question

How can I create a function out of this? Im using append & prepend to assign elements, would like to keep this as DRY as possible and be able to customize each output text.

let $paragraph = $('<p>', {
    'class': 'my-class',
    text: 'some-text'
});

let $paragraph2 = $('<p>', {
    'class': 'my-other-class',
    text: 'some-other-text'
});

My goal is to be have a easy setup for outputing codeblocks like:

<p>
    Instagram
    <span class="instagram">@instagram</span>
    Twitter
    <span class="twitter">@twitter</span>
    Github
    <span class="github">@github</span>
</p>

T.J. Crowder · Accepted Answer · 2017-03-11 12:23:43Z

1

Accept the class and text as parameters:

function createParagraph(cls, text) {
    return $('<p>', {
        'class': cls,
        text: text
    });
}

let $paragraph = createParagraph('my-class', 'some-text');
let $paragraph2 = createParagraph('my-other-class', 'some-other-text');

FWIW, createParagraph as an arrow function:

const createParagraph = (cls, text) => $('<p>', {
    'class': cls,
    text: text
});

I see you're using let, so assuming an ES2015+ browser. If so, you can safely leave the quotes off class in the object initializer. Keywords have been valid in that context since ES5. Of course, if you're transpiling for older JavaScript engines, you'll want to keep it in quotes.

answered Mar 11, 2017 at 12:23

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Collectives™ on Stack Overflow

Create a jQuery function with custom paragraph-text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related