Replace HTML Tag and it's content with JS

Question

I don't know quite anything about JS so i need your help. I've just searched on internet but i didn't found anything about what i will ask you. I need to change an html tag and all it's content and i think that the best way to do this could be JS. For example:

I need that the tag

<p id="usernameText">My Username</p>

will be changed with this

<input type="text" name="uname" id="uname" placeholder="Inserire qui l\'username" style="width:100%">

with the click of an item so i think that i should use onclick="myfunction()", but i don't have any idea where to start with the JS code! There's someone who can help me please?

Does this answer your question? [How to replace DOM element in place using Javascript?](https://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript) — Ivar, Apr 17 '21 at 11:18
I don't think unfortunatly... If i've well understood in that thread they change only the tag but i also need to chage the methods that are inside the tag. But maybe i just misunderstood the thread — Elizzit, Apr 17 '21 at 11:26
What do you mean by "_the methods that are inside the tag_"? The attributes? If so you can assign those to the newly created element (`newElem.name = "uname"`) . — Ivar, Apr 17 '21 at 11:33

Force Bolt · Answer 1 · 2021-04-17T13:30:16.377

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="div1">
      <p id="toggleItem">My Username</p>
      <button onclick="onClick()">Toggle</button>
    </div>

    <script>
      const onClick = () => {
        const div1 = document.getElementById("div1");
        const toggleItem = document.querySelector("#toggleItem");

        

        if (toggleItem.tagName === "INPUT") {
          const p = document.createElement("p");
          p.innerText = "Username";
          p.id = "toggleItem";
          div1.appendChild(p);
        } else {
          const input = document.createElement("input");
          input.name = "uname";
          input.placeholder = "Username";
          input.type = "text";
          input.id = "toggleItem";
          div1.appendChild(input);
        }

        toggleItem.remove();
      };
    </script>
  </body>
</html>

score 0 · Answer 2 · answered Apr 17 '21 at 12:30

I've found an easyest way, i have multiple elements to change so ive added also some var

    function edit(id, type, name, placeholder){
        var element = document.getElementById(id);
        var final = document.createElement('td');
        final.innerHTML = '<input type="'+type+'" name="'+name+'" id="'+name+'" 
        placeholder="Inserire qui '+placeholder+'" style="width:100%">';
        element.parentNode.replaceChild(final, element);
    }

and in html i've made like this:

    <td id="indirizzoText">
        <p>Address<i class="fas fa-pen" onClick="edit('indirizzoText', 'text', 'indirizzo', 'l\'indirizzo')"></i>
        </p>
    </td>

I've used a wrong way?

Replace HTML Tag and it's content with JS

2 Answers2