Change Class Content to href

Question

<div class="container">
    <span class="text1">test</span>
    <span class="text2">test</span>
</div>

I want to change "text2" to a href in a javascript inside my function like this:

var x=document.getElementsByClassName("text2");  // Find the elements
x.innerHTML="<a href='https://test.com'>test</a>";    // Change the content

so the content of "text2" changes to a hyperlink called "test" which refers to "https://test.com"

So, to clarify, you want to remove the `test` element and replace it with a new element: `test`? Your code above is appending an `a` tag within the `span`. Is this what you don't want? — webprojohn, Oct 04 '20 at 15:12
Replace the quotes like this `x[i].innerHTML="test";` and be sure `i` has a value. — Omar Piga, Oct 04 '20 at 15:13
@zOwN There’s an obvious syntax error. That’s not “working great”. — Sebastian Simon, Oct 04 '20 at 15:14
https://stackoverflow.com/questions/52525674/double-nested-quotes — epascarello, Oct 04 '20 at 15:15
i want to replace the content of test (which is "test") with test — , Oct 04 '20 at 15:18
Spectric because this is only a small part of my whole js???? why should i post my entire js code if it isnt needed? why do comment things which dont help me? — , Oct 04 '20 at 15:22

score 1 · Answer 1 · answered Oct 04 '20 at 15:25

you can do it like so:

var element = document.querySelector(".text2"); // Find the first element with the class text2
element.innerHTML = "<a href=\"https://test.com\">test</a>"; // Change the content including all HTML elements that might be in there to the value specified escaping the " character

<div class="container">
    <span class="text1">test</span>
    <span class="text2">test</span>
</div>

the problem was you didn't escaped the " character you can do it also without the escaping like that:

var element = document.querySelector(".text2"); // Find the first element with the class text2
element.innerHTML = "<a href='https://test.com'>test</a>"; // Change the content including all HTML elements that might be in there to the value specified

<div class="container">
    <span class="text1">test</span>
    <span class="text2">test</span>
</div>

score 0 · Accepted Answer · answered Oct 04 '20 at 15:25

Not quite sure which approach you need. So here are both:

HTML

<div class="container">
  <span class="text1">test</span>
  <span class="text2">test</span>
</div>

Approach A - Replace the inner html of the target

document.querySelector(".text2").innerHTML = "<a href='https://test.com'>test</a>";

Approach B - Replace the Span with Anchor

var target = document.querySelector(".text2");
if (target) {
  var anchor = document.createElement("a");
  anchor.setAttribute("href", "https://www.test.com");
  anchor.innerHTML = target.innerHTML;
  target.replaceWith(anchor);
}

Change Class Content to href

2 Answers2

HTML

Approach A - Replace the inner html of the target

Approach B - Replace the Span with Anchor