Question

如何为元素中已经存在的文本添加新标签。有没有比将文本复制到新元素然后从旧元素删除更好的方法了？

在下面的示例中，Hello World!中已经存在文本div。目标是在文本周围添加h1。

<head>
  <script>
    let myFunction = function() {
      let d = document.getElementById("testId");
      let h = document.createElement("h1");
      h.textContent = d.textContent;
      d.textContent = "";
      d.appendChild(h);
    };
  </script>

  <style>
    .testClass {
      height: 100px;
      margin: auto;
      width: 200px;
      border-style: solid;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="testId" class="testClass">Hello World!</div>
  <button onclick="myFunction()">Click Here</button>
</body>

Answer 1

这个问题可能会引起很多意见。

我的意思是，使用DOM API可以很好地完成它。但是，如果您了解.innerHTML的性能和安全性，可以这样做：

<head>
  <script>
   let myFunction = function() {
    let d = document.getElementById("testId");
    d.innerHTML = "<h1>" + d.textContent + "</h1>";
   };
  </script>

  <style>
    .testClass {
      height: 100px;
      margin: auto;
      width: 200px;
      border-style: solid;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="testId" class="testClass">Hello World!</div>
  <button onclick="myFunction()">Click Here</button>
</body>

将标签添加到现有文本

1 个答案: