Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

225
Views
Dynamically add html elements in react

Please how can I dynamically add html element (like span) to elements in a react component. I want to implement something like this



let text1 = '"Text one sentence.';
let text2 = 'Text two sentence'; 
const textElement1 = document.querySelector(".text-1");
const textElement2 = document.querySelector(".text-2");
let textSpan;

function setText(t) {
    t == text1 ? (textElement1.innerHTML = "") : (textElement2.innerHTML = "");
    t.split("").map((x) => {
        let charElement = document.createElement("span");
        let charNode = document.createTextNode(x);
        charElement.appendChild(charNode);
        t == text1
        ? textElement1.appendChild(charElement)
        : textElement2.appendChild(charElement);
    });
    textSpan = document.querySelectorAll("span");
    }


    function setFontWeight() {
    textSpan.forEach((element) => {
        let position = element.getBoundingClientRect();

        // Calculate The Distance Between Cursor And Target Elements
        let distance = Math.ceil(
        Math.sqrt((position.x - pointerX) ** 2 + (position.y - pointerY) ** 2)
        );

        // The Longer The Distance The Lower The Font Weight
        element.setAttribute(
        "style",
        `font-variation-settings: 'wght' ${900 - distance * 2};`
        );
    });
    }

This is the react component I have created

function TopSidePane(){
    
    return(
        <div onMouseMove={(e)=>Hover(e)} className="top-side-pane">
            <div className="text-container">
                <h1 className="text-1">{text1}</h1>
                <h1 className="text-2"> {text2}</h1>
                </div>
            <div className="custom-pointer" ></div>

        </div>
    );
}

Anytime there is a mouse movement on the component (if it get to the text inside the component) I want to be able to add span elements to the elements with the class names 'text-1' and 'text-2'. After I add the elements, I call the setFontWeight to make the weight of the hovered letters bold.

Please any help on how to implement this in react. I am new to react.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!