Why does the DIV thinks the Element is a string?

Question

I try to append a button on a div element, that isn't defined in the html page.

This is my Function to create the Button:

const img2dView = function (name) {
      return `<button class="gridButton">
            <img alt = ${name} src="$...images/${name}.png" style="width: 100%;">
          </button>`;
    };

if i append this on an already defined div it works:

$someDiv.append(img2dView(SomeName));

but if i try this on a new created div, the button is just a string:

let helpDiv = document.createElement('div');
      helpDiv.class = 'square';
      helpDiv.append(img2dView(SomeNames[i]));

Output:

<div>
     "<button class="gridButton">
            <img alt = blocked src="assets/.....png" style="width: 100%;">
          </button>;"
</div>

I think i need .appendChild. But then I get a error Message, that "img2dView(SomeNames[i])" isn't a node

Is `$someDiv` a jQuery object? There is no `.append()` method on ordinary DOM nodes. — Pointy, Mar 01 '21 at 16:33
hmh i dont know actually, but on $someDiv the .append is working :D — psclp, Mar 01 '21 at 16:34
@Pointy Yes there is, and that's what's causing confusion here. `jQueryObject.append()` will interpret the string as HTML and parse it, whereas `ParentNode.append()` takes strings literally. — Niet the Dark Absol, Mar 01 '21 at 16:36
oh ok, yes it's a jquery object. I define it in the index file. And then export const $someDiv= $('#SomeDiv'); — psclp, Mar 01 '21 at 16:37
@NiettheDarkAbsol ok thanks! but how can i append the button on a ParentNode? — psclp, Mar 01 '21 at 16:38

score 0 · Answer 1 · answered Mar 01 '21 at 16:42

0

If you are using jQuery use as:

$someDiv = $('<div />');
$someDiv.append('<button class="gridButton"> <img alt = blocked src="assets/.....png" style="width: 100%;"> </button>');

answered Mar 01 '21 at 16:42

Ashmah

842
2
8
17

thanks for the answer, but I don't want to use jQuery there :) – psclp Mar 01 '21 at 16:50

score 0 · Accepted Answer · answered Mar 01 '21 at 16:49

It worked with:

const img2dView = function (name) {
      let div = document.createElement('div');
      div.innerHTML =`<button class="gridButton">
            <img alt = ${name} src="...${name}.png" style="width: 100%;">
          </button>`;
      return div.firstChild;
    };

thanks to: Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

Why does the DIV thinks the Element is a string?

2 Answers2