Skip to content

Instantly share code, notes, and snippets.

@Blumed

Blumed/createElement.js

Last active June 27, 2025 05:10
Show Gist options
  • Save Blumed/33c2faea5d7cdb727bc9c57a35d5bb8c to your computer and use it in GitHub Desktop.
Save Blumed/33c2faea5d7cdb727bc9c57a35d5bb8c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Blumed revised this gist Jun 27, 2025. 4 changed files with 130 additions and 132 deletions.
    132 changes: 0 additions & 132 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,132 +0,0 @@
    const uniqueName = (name) => `b00k_${name}`;

    /*
    Creates a unique name which will most likely not colid with a name/label/class/id on any given webpage.
    If you use this function on multiple bookmarklets I would suggest using the name of the bookmarkelt before the underscore.
    Example:
    uniqueName('card');
    Output -> b00k_card
    */

    const svgIcon = (props = {}) => {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    svg.setAttribute('width', `${props.width ?? '24'}`);
    svg.setAttribute('height', `${props.height ?? '24'}`);
    svg.setAttribute('viewBox', `${props.viewBox ?? '0 -960 960 960'}`);

    const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    svgPath.setAttribute('d', `${props.path ?? 'M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z'}`);
    svgPath.setAttribute('fill', `${props.fill ?? '#000'}`);
    svg.appendChild(svgPath);

    if (!props.container) {
    document.body.appendChild(svg);
    return;
    }

    const target = document.querySelector(props.container.target);

    switch (props.container.position) {
    case 'before':
    target.prepend(svg);
    break;
    case 'insert':
    target.appendChild(svg);
    break;
    case 'after':
    target.append(svg);
    break;
    default:
    console.log(`Position ${props.container.position} not found. Use before, insert, or after`);
    }
    };

    /*
    Create a basic flexible svg and position in it where you need it
    Example:
    svgIcon({
    fill: 'blue',
    path: 'M410-120v-238L204-239l-70-121 206-120-206-119 70-121 206 119v-239h140v239l206-119 70 121-206 119 206 120-70 121-206-119v238H410Z',
    container: {
    target: 'body',
    position: 'insert'
    }
    });
    Output -> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" fill="#fff"></path></svg>
    */

    const make = (tag, props = {}) => {
    const element = document.createElement(tag);

    if (props.id) element.id = props.id;

    if (props.className) element.classList.add(props.className);

    if (props.style) Object.assign(element.style, props.style);

    if (props.text) element.textContent = props.text;

    if (props.attributes) for (const [key, value] of Object.entries(props.attributes)) {
    element.setAttribute(key, value);
    }

    if (props.events) for (const [event, handler] of Object.entries(props.events)) {
    element.addEventListener(event, handler);
    }

    if (!props.container) {
    document.body.appendChild(element);
    return;
    }

    const items = document.querySelectorAll(props.container.target);

    if (items.length === 0) {
    console.log(`No elements found using target: ${props.container.target}`);
    return;
    }

    switch (props.container.position) {
    case 'before':
    for (const item of items) {
    item.prepend(element.cloneNode(true));
    }
    break;
    case 'insert':
    for (const item of items) {
    item.appendChild(element.cloneNode(true));
    }
    break;
    case 'after':
    for (const item of items) {
    item.append(element.cloneNode(true));
    }
    break;
    default:
    console.log(`Position ${props.container.position} not found. Use before, insert, or after`);
    }
    };

    /*
    Function for templating html elements ( ! This is a work in progress ! )
    Example:
    make('h1', {
    id: 'i-have-an-id-officer',
    className: 'best-in-class',
    style: { backgroundColor: 'red' },
    text: 'This is some TEXT!',
    attributes: { 'data-or-dada': 'data' },
    container: {
    target: 'body',
    position: 'insert'
    }
    });
    Output -> <h1 id="i-have-an-id-officer" class="best-in-class" style="background-color: red" data-or-dada="data">This is some TEXT!</h1>
    */
    70 changes: 70 additions & 0 deletions createElement.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    const customElement = (tag, props = {}) => {
    const element = document.createElement(tag);

    if (props.id) element.id = props.id;

    if (props.className) element.classList.add(props.className);

    if (props.style) Object.assign(element.style, props.style);

    if (props.text) element.textContent = props.text;

    if (props.attributes) for (const [key, value] of Object.entries(props.attributes)) {
    element.setAttribute(key, value);
    }

    if (props.events) for (const [event, handler] of Object.entries(props.events)) {
    element.addEventListener(event, handler);
    }

    if (!props.container) {
    document.body.appendChild(element);
    return;
    }

    const items = document.querySelectorAll(props.container.target);

    if (items.length === 0) {
    console.log(`No elements found using target: ${props.container.target}`);
    return;
    }

    switch (props.container.position) {
    case 'before':
    for (const item of items) {
    item.prepend(element.cloneNode(true));
    }
    break;
    case 'insert':
    for (const item of items) {
    item.appendChild(element.cloneNode(true));
    }
    break;
    case 'after':
    for (const item of items) {
    item.append(element.cloneNode(true));
    }
    break;
    default:
    console.log(`Position ${props.container.position} not found. Use before, insert, or after`);
    }
    };

    /*
    Function for templating html elements ( ! This is a work in progress ! )
    Example:
    customElement('h1', {
    id: 'i-have-an-id-officer',
    className: 'best-in-class',
    style: { backgroundColor: 'red' },
    text: 'This is some TEXT!',
    attributes: { 'data-or-dada': 'data' },
    container: {
    target: 'body',
    position: 'insert'
    }
    });
    Output -> <h1 id="i-have-an-id-officer" class="best-in-class" style="background-color: red" data-or-dada="data">This is some TEXT!</h1>
    */
    49 changes: 49 additions & 0 deletions createSvg.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    const svgIcon = (props = {}) => {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    svg.setAttribute('width', `${props.width ?? '24'}`);
    svg.setAttribute('height', `${props.height ?? '24'}`);
    svg.setAttribute('viewBox', `${props.viewBox ?? '0 -960 960 960'}`);

    const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    svgPath.setAttribute('d', `${props.path ?? 'M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z'}`);
    svgPath.setAttribute('fill', `${props.fill ?? '#000'}`);
    svg.appendChild(svgPath);

    if (!props.container) {
    document.body.appendChild(svg);
    return;
    }

    const target = document.querySelector(props.container.target);

    switch (props.container.position) {
    case 'before':
    target.prepend(svg);
    break;
    case 'insert':
    target.appendChild(svg);
    break;
    case 'after':
    target.append(svg);
    break;
    default:
    console.log(`Position ${props.container.position} not found. Use before, insert, or after`);
    }
    };

    /*
    Create a basic flexible svg and position in it where you need it
    Example:
    svgIcon({
    fill: 'blue',
    path: 'M410-120v-238L204-239l-70-121 206-120-206-119 70-121 206 119v-239h140v239l206-119 70 121-206 119 206 120-70 121-206-119v238H410Z',
    container: {
    target: 'body',
    position: 'insert'
    }
    });
    Output -> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" fill="#fff"></path></svg>
    */
    11 changes: 11 additions & 0 deletions uniqueName.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    const uniqueName = (name) => `b00k_${name}`;

    /*
    Creates a unique name which will most likely not colid with a name/label/class/id on any given webpage.
    If you use this function on multiple bookmarklets I would suggest using the name of the bookmarkelt before the underscore.
    Example:
    uniqueName('card');
    Output -> b00k_card
    */
  2. Blumed revised this gist Jun 27, 2025. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -49,7 +49,8 @@ const svgIcon = (props = {}) => {
    Example:
    svgIcon({
    fill: 'green',
    fill: 'blue',
    path: 'M410-120v-238L204-239l-70-121 206-120-206-119 70-121 206 119v-239h140v239l206-119 70 121-206 119 206 120-70 121-206-119v238H410Z',
    container: {
    target: 'body',
    position: 'insert'
  3. Blumed revised this gist Jun 27, 2025. No changes.
  4. Blumed revised this gist Jun 27, 2025. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    const uniqueName = (name) => `b00k_${name}`;

    /*
    Creates a unique name which will most likely not colid with a name/label/class/id on any given webpage.
    If you use this function on multiple bookmarklets I would suggest using the name of the bookmarkelt before the underscore.
    @@ -8,6 +9,7 @@ const uniqueName = (name) => `b00k_${name}`;
    Output -> b00k_card
    */

    const svgIcon = (props = {}) => {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  5. Blumed revised this gist Jun 27, 2025. 1 changed file with 7 additions and 4 deletions.
    11 changes: 7 additions & 4 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,8 @@ const uniqueName = (name) => `b00k_${name}`;
    If you use this function on multiple bookmarklets I would suggest using the name of the bookmarkelt before the underscore.
    Example:
    uniqueName('card');
    uniqueName('card');
    Output -> b00k_card
    */
    const svgIcon = (props = {}) => {
    @@ -52,6 +53,7 @@ const svgIcon = (props = {}) => {
    position: 'insert'
    }
    });
    Output -> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" fill="#fff"></path></svg>
    */

    @@ -91,17 +93,17 @@ const make = (tag, props = {}) => {
    for (const item of items) {
    item.prepend(element.cloneNode(true));
    }
    break;
    break;
    case 'insert':
    for (const item of items) {
    item.appendChild(element.cloneNode(true));
    }
    break;
    break;
    case 'after':
    for (const item of items) {
    item.append(element.cloneNode(true));
    }
    break;
    break;
    default:
    console.log(`Position ${props.container.position} not found. Use before, insert, or after`);
    }
    @@ -122,5 +124,6 @@ const make = (tag, props = {}) => {
    position: 'insert'
    }
    });
    Output -> <h1 id="i-have-an-id-officer" class="best-in-class" style="background-color: red" data-or-dada="data">This is some TEXT!</h1>
    */
  6. Blumed revised this gist Jun 27, 2025. 1 changed file with 13 additions and 0 deletions.
    13 changes: 13 additions & 0 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -57,38 +57,51 @@ const svgIcon = (props = {}) => {

    const make = (tag, props = {}) => {
    const element = document.createElement(tag);

    if (props.id) element.id = props.id;

    if (props.className) element.classList.add(props.className);

    if (props.style) Object.assign(element.style, props.style);

    if (props.text) element.textContent = props.text;

    if (props.attributes) for (const [key, value] of Object.entries(props.attributes)) {
    element.setAttribute(key, value);
    }

    if (props.events) for (const [event, handler] of Object.entries(props.events)) {
    element.addEventListener(event, handler);
    }

    if (!props.container) {
    document.body.appendChild(element);
    return;
    }

    const items = document.querySelectorAll(props.container.target);

    if (items.length === 0) {
    console.log(`No elements found using target: ${props.container.target}`);
    return;
    }

    switch (props.container.position) {
    case 'before':
    for (const item of items) {
    item.prepend(element.cloneNode(true));
    }
    break;
    case 'insert':
    for (const item of items) {
    item.appendChild(element.cloneNode(true));
    }
    break;
    case 'after':
    for (const item of items) {
    item.append(element.cloneNode(true));
    }
    break;
    default:
    console.log(`Position ${props.container.position} not found. Use before, insert, or after`);
    }
  7. Blumed revised this gist Jun 27, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    const uniqueName = (name) => `b00k_${name}`;
    /*
    Creates a unique name which would most likely not colid with a class on any given webpage.
    Creates a unique name which will most likely not colid with a name/label/class/id on any given webpage.
    If you use this function on multiple bookmarklets I would suggest using the name of the bookmarkelt before the underscore.
    Example:
  8. Blumed revised this gist Jun 27, 2025. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -46,12 +46,13 @@ const svgIcon = (props = {}) => {
    Example:
    svgIcon({
    fill: 'green',
    container: {
    target: 'body',
    position: 'insert'
    }
    });
    fill: 'green',
    container: {
    target: 'body',
    position: 'insert'
    }
    });
    Output -> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" fill="#fff"></path></svg>
    */

    const make = (tag, props = {}) => {
  9. Blumed revised this gist Jun 27, 2025. 1 changed file with 43 additions and 12 deletions.
    55 changes: 43 additions & 12 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,21 +7,52 @@ const uniqueName = (name) => `b00k_${name}`;
    uniqueName('card');
    Output -> b00k_card
    */

    const svg = (props = {}) => {
    const svgIcon = (props = {}) => {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    props.width ? svg.width = props.width : svg.setAttribute('width', '24');
    props.hight ? svg.hight = props.height : svg.setAttribute('height', '24');
    props.viewBox ? svg.viewBox = props.viewBox : svg.setAttribute('viewBox', '0 0 24 24');
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    svg.setAttribute('width', `${props.width ?? '24'}`);
    svg.setAttribute('height', `${props.height ?? '24'}`);
    svg.setAttribute('viewBox', `${props.viewBox ?? '0 -960 960 960'}`);

    const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    svgPath.setAttribute('d', `${props.path ?? 'M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z'}`);
    svgPath.setAttribute('fill', `${props.fill ?? '#000'}`);
    svg.appendChild(svgPath);

    if (!props.container) {
    document.body.appendChild(svg);
    return;
    }

    const target = document.querySelector(props.container.target);

    // Create path element within SVG
    const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    props.path ? svgPath = `d="${props.path}"` : svgPath.setAttribute('d', 'M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z');
    switch (props.container.position) {
    case 'before':
    target.prepend(svg);
    break;
    case 'insert':
    target.appendChild(svg);
    break;
    case 'after':
    target.append(svg);
    break;
    default:
    console.log(`Position ${props.container.position} not found. Use before, insert, or after`);
    }
    };

    // Append path to SVG, and SVG to button
    svgElement.appendChild(pathElement);
    dynamicButton.appendChild(svgElement);b
    }
    /*
    Create a basic flexible svg and position in it where you need it
    Example:
    svgIcon({
    fill: 'green',
    container: {
    target: 'body',
    position: 'insert'
    }
    });
    */

    const make = (tag, props = {}) => {
    const element = document.createElement(tag);
  10. Blumed revised this gist Jun 26, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@ const uniqueName = (name) => `b00k_${name}`;
    Output -> b00k_card
    */

    const svgCopy = (props = {}) => {
    const svg = (props = {}) => {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    props.width ? svg.width = props.width : svg.setAttribute('width', '24');
    props.hight ? svg.hight = props.height : svg.setAttribute('height', '24');
  11. Blumed revised this gist Jun 26, 2025. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,15 +8,15 @@ const uniqueName = (name) => `b00k_${name}`;
    Output -> b00k_card
    */

    const svgCopy =(props = {}) => {
    const svgCopy = (props = {}) => {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    props.width ? svg.width = props.width : svg.setAttribute('width', '24');
    props.hight ? svg.hight = props.height : svg.setAttribute('height', '24');
    props.viewBox ? svg.viewBox = props.viewBox : svg.setAttribute('viewBox', '0 0 24 24');

    // Create path element within SVG
    const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    props.path ? svgPath = `d ${props.path}` : svgPath.setAttribute('d', 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z');
    props.path ? svgPath = `d="${props.path}"` : svgPath.setAttribute('d', 'M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z');

    // Append path to SVG, and SVG to button
    svgElement.appendChild(pathElement);
  12. Blumed revised this gist Jun 26, 2025. 1 changed file with 12 additions and 11 deletions.
    23 changes: 12 additions & 11 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -66,15 +66,16 @@ const make = (tag, props = {}) => {
    Function for templating html elements ( ! This is a work in progress ! )
    Example:
    make('h1', {
    id: 'i-have-an-id-officer',
    className: 'best-in-class',
    style: { backgroundColor: 'red' },
    text: 'This is some TEXT!',
    attributes: { 'data-or-dada': 'data' },
    container: {
    target: '#i-have-an-id-officer',
    position: 'insert'
    }
    });
    make('h1', {
    id: 'i-have-an-id-officer',
    className: 'best-in-class',
    style: { backgroundColor: 'red' },
    text: 'This is some TEXT!',
    attributes: { 'data-or-dada': 'data' },
    container: {
    target: 'body',
    position: 'insert'
    }
    });
    Output -> <h1 id="i-have-an-id-officer" class="best-in-class" style="background-color: red" data-or-dada="data">This is some TEXT!</h1>
    */
  13. Blumed revised this gist Jun 26, 2025. 1 changed file with 30 additions and 19 deletions.
    49 changes: 30 additions & 19 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -37,33 +37,44 @@ const make = (tag, props = {}) => {
    }
    if (!props.container) {
    document.body.appendChild(element);
    } else {
    try{
    if (props.container.all) {
    const temp = document.querySelectorAll(props.container.target);
    for (let item of temp) {
    item.appendChild(element.cloneNode(true));
    }
    } else {
    const temp = document.querySelector(props.container.target);
    temp.appendChild(element);
    }

    } catch(error){
    console.log(`Error ${props.container.target} cannot be found `);
    return;
    }
    const items = document.querySelectorAll(props.container.target);
    if (items.length === 0) {
    console.log(`No elements found using target: ${props.container.target}`);
    return;
    }
    switch (props.container.position) {
    case 'before':
    for (const item of items) {
    item.prepend(element.cloneNode(true));
    }
    case 'insert':
    for (const item of items) {
    item.appendChild(element.cloneNode(true));
    }
    case 'after':
    for (const item of items) {
    item.append(element.cloneNode(true));
    }
    default:
    console.log(`Position ${props.container.position} not found. Use before, insert, or after`);
    }

    return element;
    };

    /*
    Function for templating html elements ( ! This is a work in progress ! )
    Example:
    make('h1', {
    id: 'i-have-an-id-officer',
    className: 'best-in-class',
    style: { backgroundColor: 'red' },
    text: 'This is some TEXT!',
    attributes: { 'data-or-dada': 'data' },
    container: {
    target: '.bob',
    all: true
    target: '#i-have-an-id-officer',
    position: 'insert'
    }
    });
    });
    */
  14. Blumed revised this gist Jun 25, 2025. 1 changed file with 42 additions and 21 deletions.
    63 changes: 42 additions & 21 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -23,26 +23,47 @@ const svgCopy =(props = {}) => {
    dynamicButton.appendChild(svgElement);b
    }

    const make = (tag, props = {}, container) => {
    const element = document.createElement(tag);
    if(props.id) element.id = props.id;
    if(props.className) element.classList.add(props.className);
    if(props.style) Object.assign(element.style, props.style);
    if(props.attributes) for (const [key, value] of Object.entries(props.attributes)) {
    element.setAttribute(key, value);
    const make = (tag, props = {}) => {
    const element = document.createElement(tag);
    if (props.id) element.id = props.id;
    if (props.className) element.classList.add(props.className);
    if (props.style) Object.assign(element.style, props.style);
    if (props.text) element.textContent = props.text;
    if (props.attributes) for (const [key, value] of Object.entries(props.attributes)) {
    element.setAttribute(key, value);
    }
    if (props.events) for (const [event, handler] of Object.entries(props.events)) {
    element.addEventListener(event, handler);
    }
    if (!props.container) {
    document.body.appendChild(element);
    } else {
    try{
    if (props.container.all) {
    const temp = document.querySelectorAll(props.container.target);
    for (let item of temp) {
    item.appendChild(element.cloneNode(true));
    }
    } else {
    const temp = document.querySelector(props.container.target);
    temp.appendChild(element);
    }

    } catch(error){
    console.log(`Error ${props.container.target} cannot be found `);
    }
    if(props.events) for (const [event, handler] of Object.entries(props.events)) {
    element.addEventListener(event, handler);
    }
    if(typeof container === 'undefined'){
    document.body.appendChild(element);
    } else{
    try {
    container.appendChild(element);
    }catch(error) {
    console.log(`Error ${container} cannot be found `);
    }
    }
    }

    return element;
    }
    return element;
    };
    make('h1', {
    id: 'i-have-an-id-officer',
    className: 'best-in-class',
    style: { backgroundColor: 'red' },
    text: 'This is some TEXT!',
    attributes: { 'data-or-dada': 'data' },
    container: {
    target: '.bob',
    all: true
    }
    });
  15. Blumed created this gist Jun 25, 2025.
    48 changes: 48 additions & 0 deletions bookmarklet-utilities.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    const uniqueName = (name) => `b00k_${name}`;
    /*
    Creates a unique name which would most likely not colid with a class on any given webpage.
    If you use this function on multiple bookmarklets I would suggest using the name of the bookmarkelt before the underscore.
    Example:
    uniqueName('card');
    Output -> b00k_card
    */

    const svgCopy =(props = {}) => {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    props.width ? svg.width = props.width : svg.setAttribute('width', '24');
    props.hight ? svg.hight = props.height : svg.setAttribute('height', '24');
    props.viewBox ? svg.viewBox = props.viewBox : svg.setAttribute('viewBox', '0 0 24 24');

    // Create path element within SVG
    const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    props.path ? svgPath = `d ${props.path}` : svgPath.setAttribute('d', 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z');

    // Append path to SVG, and SVG to button
    svgElement.appendChild(pathElement);
    dynamicButton.appendChild(svgElement);b
    }

    const make = (tag, props = {}, container) => {
    const element = document.createElement(tag);
    if(props.id) element.id = props.id;
    if(props.className) element.classList.add(props.className);
    if(props.style) Object.assign(element.style, props.style);
    if(props.attributes) for (const [key, value] of Object.entries(props.attributes)) {
    element.setAttribute(key, value);
    }
    if(props.events) for (const [event, handler] of Object.entries(props.events)) {
    element.addEventListener(event, handler);
    }
    if(typeof container === 'undefined'){
    document.body.appendChild(element);
    } else{
    try {
    container.appendChild(element);
    }catch(error) {
    console.log(`Error ${container} cannot be found `);
    }
    }

    return element;
    }