Search code examples
javascripthtmldomaxiosinnerhtml

can <span id="textArea1"></span> be re-used in the DOM?

I wrote a simple NodeJS/express API, serving a single HTML page. The page contains a javascript form, sending a date to the server using axios. The server does calculations and sends back a response. The response is then cut into bits, with their values written as .innerHTML "id"s.

                axios({
                        method: "post",
                        url: "/",
                        data: data,
                    })
                    .then((res) => {
                        document.getElementById("textArea1").innerHTML = res.data.earth.lon;
                        document.getElementById("textArea2").innerHTML = res.data.earth.lat;

I noticed that each "id" can be used only once in the body. If I write the same line twice (notice the "textArea1") :

    <p> longitude: <span id="textArea1"></span>&deg;</p>
    <p> longitude: <span id="textArea1"></span>&deg;</p>

... only the first one gets a value.

I guess the "id" is unique in the DOM and cannot be re-used ? I don't need it twice, I just noticed this doing some copy-paste.

Would there be a simple way, if I needed to use the same "id" twice ?

Thanks, Lorenzo

Solution

  • The reason why use unique ids is for your browser, and you as a developer handle correctly the dom element and avoid many problems.

    Figure out your neighborhood, a house with same postal code, number will be very hard to ensure that postal deliver have sure if the house is correct.

    You will not disallowed create elements with ids equal but you want avoid It.