Unable to override url link text using appendChild textNode-CodePudding

I have a page (one of many) each with an html table of 3 cells of headings (dimension, height, width) and 3 cells of values eg '100 by 50', 100, 50

I aim to create links at the base of the page to url examples with dimensions similar to these, slightly larger, slightly smaller.

I collect the numbers from the dynamically generated table and add or subtract to get the new values using: `

    var $ = jQuery;
    $(function () {
    $('#table_1 tr').each(function() {
        var heightAdd1 = parseInt($(this).find("td").eq(1).html()) 1;
        var heightLess1 = parseInt($(this).find("td").eq(1).html())-1;

        var widthAdd1 = parseInt($(this).find("td").eq(2).html()) 1;
        var widthLess1 = parseInt($(this).find("td").eq(2).html())-1;

` etc.

I then place these into a new url link using:

$("a#heightAdd1widthAdd1").attr("href", "https://www.example.com/"   heightAdd1   "-by-"   widthAdd1);

I want the link texts to show on the page as e.g. '101-by-51' '99-by-49' with whatever variation of numbers get generated.

On the html page I have `

<a id="heightAdd1widthAdd1" href="#">height 1 width 1</a><br>
<a id="heightLess1widthLess1" href="#">height-1 width-1</a>

I try to overwrite this fixed text using:

let textNode = document.createTextNode(heightAdd1   "-by-"   widthAdd1);

document.getElementById("heightAdd1widthAdd1").innerHTML = document.body.appendChild(textNode);

` but the output I get on the page overwrites it to only show '[object Text]' which still has the correct url link.

How can I get the url link text to read instead of '[object Text]', e.g. '101-by-51'? The fiddle example is here https://jsfiddle.net/qm9cLs0o/ if you delete lines 33 and 34 the original text in the html shows again. Hovering over the links show the urls are correct.

CodePudding user response：

You do not need to create a textnode (line 33) , use innerText and output it directly, this is how I would do this line 34 should be :

document.getElementById("heightAdd1widthAdd1").innerText = heightAdd1   "-by-"   widthAdd1;