用 JS 替换 HTML 标记及其内容答案

【问题标题】：Replace HTML Tag and it's content with JS用 JS 替换 HTML 标记及其内容
【发布时间】：2021-07-12 04:53:22
【问题描述】：

我对 JS 不太了解，所以我需要你的帮助。我刚刚在互联网上搜索，但我没有找到任何关于我会问你什么的信息。我需要更改一个 html 标记及其所有内容，我认为最好的方法可能是 JS。例如：

我需要那个标签

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

将随之改变

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

点击一个项目，所以我认为我应该使用onclick="myfunction()"，但我不知道从哪里开始 JS 代码！请问有人可以帮我吗？

【问题讨论】：

这能回答你的问题吗？ How to replace DOM element in place using Javascript?
我不认为不幸......如果我在那个线程中很好理解，他们只更改标签，但我还需要更改标签内的方法。但也许我只是误解了线程
“标签内的方法”是什么意思？属性？如果是这样，您可以将它们分配给新创建的元素 (newElem.name = "uname")。
好的，非常感谢！！我做对了！！！

标签： javascript html function input replace

【解决方案1】：

<!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>

【讨论】：

【解决方案2】：

我找到了一种最简单的方法，我有多个元素要更改，所以我还添加了一些 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);
    }

在 html 中我做了这样的：

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

我用错了方法？

【讨论】：