Selecting element from a DOM using JS

Question

This selector doc.getElementsByClassName('value') needs to target the td element which is the next sibling of another td which has the text "sign here" so that the image appended after the "abc:".

How can it be done? Thanks

let w = window.open();
let doc = w.document;
doc.write(raw_html);
doc.close();
let sigImg = new Image();
sigImg.src = signature;
doc.getElementsByClassName('value').appendChild(sigImg); //wrong selector

There are many of td and tr element with different class and values.

<tr>
  <td class="label">sign here</td>
  <td class="value">abc:</td>
</tr>

edit
The element index is not known in advance. only that it is after another td element which has its text equal to "sign here"

getElementsByClassName returns an array-like nodelist. Just access whichever element thru subscript — Andrew Li
– Andrew Li, Commented Aug 10, 2016 at 4:26
getElementsByClassName returns a NodeList. Try querySelector which takes a CSS selector and returns the first element that matches. — kamoroso94
– kamoroso94, Commented Aug 10, 2016 at 4:27
@kamoroso94 would the querySelector filter out the results by the text inside the td being "sign here"? and if so, how? can you show in an answer? thx — Fred J.
– Fred J., Commented Aug 10, 2016 at 4:31
No you can't use CSS selectors to match elements containing a certain text. If I were you, I'd put an id on the element you need and be done with it. — kamoroso94
– kamoroso94, Commented Aug 10, 2016 at 4:33

guest271314 · Accepted Answer · 2016-08-10 04:51:57Z

1

document.getElementsByClassName returns an HTMLCollection. Use bracket notation to select element at specific index; e.g., [0] to select element at index 0 of returned collection

doc.getElementsByClassName('value')[0].appendChild(sigImg);

To select element where previous element text contains "sign here" you can iterate all elements having className "value", check if element .previousElementSibling .textContent is equal to required text

<table>
  <tbody>
    <tr>
      <td class="label">sign here</td>
      <td class="value">abc:</td>
    </tr>
    <tr>
      <td class="label">do not sign here</td>
      <td class="value">def:</td>
    </tr>
  </tbody>
</table>
<script>
  var sigImg = new Image;
  sigImg.src = "http://lorempixel.com/50/50";
  for (var elem of document.getElementsByClassName("value")) {
    if (elem.previousElementSibling.textContent === "sign here") {
      elem.appendChild(sigImg); break;
    }
  }
</script>

edited Aug 10, 2016 at 4:51

answered Aug 10, 2016 at 4:25

guest271314

1

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

2 Comments

Rayon Over a year ago

Why new Image; instead of new Image(); ?

guest271314 Over a year ago

@Rayon Either returns same result function fn() { this.name = 123 } var n = new fn; console.log(n) "The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function."

kamoroso94 · Accepted Answer · 2016-08-10 04:41:44Z

0

Since there will be many td.labels and td.values, I'd select every td.label and loop trough them comparing their textContent to "sign here" then grab the next element to work with.

var tdLabels = document.querySelectorAll("td.label");
var tdValue = null;
for(var i=0; i<tdLabels.length; i++) {
    var td = tdLabels[i];
    if(td.textContent=="sign here") {
        tdValue = td.parentNode.querySelector("td.value");
        break;
    }
}
// use tdValue somehow, but null if not found

This will find the element you're looking for and store a reference to it in tdValue. If such an element doesn't exist, it will be set to null.

answered Aug 10, 2016 at 4:41

kamoroso94

1,7351 gold badge16 silver badges19 bronze badges

Collectives™ on Stack Overflow

Selecting element from a DOM using JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related