JS在Span中添加标签 - Javascript

在Web开发中，添加标签来装饰文本是很常见的需求。在JS中，我们可以利用DOM操作来实现。

使用createElement()方法创建元素

我们可以使用createElement()方法创建需要的元素标签，然后将其添加到span标签中。

let span = document.getElementById("mySpan");
let newElement = document.createElement("p");
newElement.innerHTML = "Hello World!";
span.appendChild(newElement);

在上述代码中，我们首先获取文档中的id为"mySpan"的span标签。然后，创建一个新的p标签，并将其内容设置为"Hello World!"。最后，使用appendChild()方法将新的p标签添加到span标签中。

使用insertAdjacentHTML()方法添加HTML元素

我们也可以使用insertAdjacentHTML()方法来直接添加HTML元素到span标签中。

let span = document.getElementById("mySpan");
span.insertAdjacentHTML('beforeend', '<p>Hello World!</p>');

在上述代码中，我们同样获取了id为"mySpan"的span标签。然后，使用insertAdjacentHTML()方法将一个新的p标签添加到span标签的末尾。

总结

无论使用createElement()或是insertAdjacentHTML()方法，JS都能够让我们方便地在span标签中添加标签。这种技巧可以用于各种形式的文本装饰，如添加图标、按钮、超链接等等。