-4

I have been working all day to try and troubleshoot an issue. I have a program that does an append of a string at the end of a table row. However, for some reason I am not able to get at this string via Javascript. I've tried the listener thing and for whatever reason the way this particular string is being created I just can't access is via the DOM.

This is essentially the line of code that's giving me trouble...

var delButtonHTML = '<a class="' + options.deleteCssClass + '" href="javascript:void(0)">' + options.deleteText +'</a>';
if (options.deleteContainerClass) {
} else {
    row.append(delButtonHTML);

It is creating the button, which is essentially an anchor....but I can't get to it no matter what I try in the DOM. Is there an alternative to append that would work in this situation? I've tinkered with update...and extend and no immediate luck.

mkrieger1
  • 19,194
  • 5
  • 54
  • 65
Steve Smith
  • 1,019
  • 3
  • 16
  • 38
  • I'm a bit confused if you are talking about JavaScript or Python. – mkrieger1 Jun 30 '21 at 23:01
  • My bad. Too much time at keyboard. Yep this is Javascript. – Steve Smith Jun 30 '21 at 23:02
  • Are you thinking of `.appendChild()`? The argument has to be an element, not an HTML string. – Barmar Jun 30 '21 at 23:07
  • If you use jQuery, it has `.append()`, and the argument can be HTML or an object. – Barmar Jun 30 '21 at 23:07
  • 1
    Do you want to append a string or an element? If you want to append an element from HTML, use `row.insertAdjacentHTML("beforeend", delButtonHTML);` instead. Alternatively, use a proper element: `const delButton = Object.assign(document.createElement("button"), { value: options.deleteText }); delButton.classList.add(options.deleteCssClass);` and `row.append(delButtonHTML);`. Don’t use links that act as buttons; that’s bad practice and has a negative accessibility impact. – Sebastian Simon Jun 30 '21 at 23:07
  • 1
    [Duplicate](//google.com/search?q=site%3Astackoverflow.com+js+html+string+%22.append%22+-jquery) of [Append html element to the DOM instead of string of html](/q/53746340/4642212). – Sebastian Simon Jun 30 '21 at 23:11

2 Answers2

1

You can use document.createElement.

let a = document.createElement('a');
a.className = options.deleteCssClass;
a.href = 'javascript:void(0)';
a.textContent = options.deleteText;
row.appendChild(a);
// use the a variable to access the element
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
0

.append() requires a DOM element to be passed to it, not a string. So, instead of manually constructing a string, dynamically create a new element and configure it.

Also, you should not be using a hyperlink with javascript:void(0) because it's not 1997 any more. Any visible element supports a click event so just use something like a span and a click event. Hyperlinks are for navigation only and when you don't use them that way, it causes problems for visually impaired users who rely on screen readers.

var delButton = document.createElement("span");
delButton.classList.add(options.deleteCssClass);
delButton.textContent = options.deleteText;

// Don't test for a condition where you aren't going to do anything
if (!options.deleteContainerClass) {
    row.append(delButtonHTML);
}
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71