Change a String of text from generated code in javascript

Question

I have a checkout page on a site that generates a shipping message. I need to change the text of that shipping message.

Here is the path to the element needing changed:

#order_review > table > tfoot > tr.shipping > td > p

Here is the approach I'd like to take (correct me if a better one), but I need help drilling down to the right element:

var oldstring = "Enter your shipping information above to show shipping options."
var changeit = document.getElementById("order_review");
changeit.oldstring.replace("Enter your shipping information above to show shipping options.", "Enter your full address to verify free delivery.");

document.querySelector("#order_review > table > tfoot > tr.shipping > td > p") — Andreas
– Andreas, Commented Feb 21, 2018 at 16:05
Strings are immutable. replace returns a new string. And you are may looking for the textContent property — Jonas Wilms
– Jonas Wilms, Commented Feb 21, 2018 at 16:06
@JonasW. more than that, the OP is trying to "update" the element itself. — Ele
– Ele, Commented Feb 21, 2018 at 16:07

Racil Hilan · Accepted Answer · 2018-02-21 16:21:44Z

1

You can use the querySelector method as Andereas mentioned in the comments. You don't need to use replace, simply assign the new text to innerHTML or textContent:

var changeit = document.querySelector("#order_review > table > tfoot > tr.shipping > td > p");
changeit.textContent = "Enter your full address to verify free delivery.";

If you want to keep the reference to the order_review and drill down from there, you can do this:

var changeit = document.getElementById("order_review");
changeit.querySelector("table > tfoot > tr.shipping > td > p").textContent = "Enter your full address to verify free delivery.";

edited Feb 21, 2018 at 16:21

answered Feb 21, 2018 at 16:13

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

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

Comments

Racil Hilan · Accepted Answer · 2018-02-21 19:20:57Z

1

I like to use textContent when updating text on the DOM:

let el = document.querySelector("#order_review > table > tfoot > tr.shipping > td > p");
el.textContent = "Enter your full address to verify free delivery.";

edited Feb 21, 2018 at 19:20

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

answered Feb 21, 2018 at 16:12

s_coder

213 bronze badges

1 Comment

s_coder Over a year ago

Improved answer.

animake · Accepted Answer · 2018-02-22 10:28:45Z

1

var qs = document.getElementById("order_review");
qs.querySelector("table > tfoot > tr.shipping > td > p").innerHTML = "Enter your full address to verify free delivery.";

<div id="order_review">
  <table>
    <tfoot>
      <tr class="shipping">
        <td>
          <p>Enter your shipping information above to show shipping options.</p>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

edited Feb 22, 2018 at 10:28

answered Feb 21, 2018 at 16:08

animake

3092 silver badges8 bronze badges

1 Comment

Ele Over a year ago

Question's title: Change a String of text from generated code in javascript.

Collectives™ on Stack Overflow

Change a String of text from generated code in javascript

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related