如何使用JavaScript更改HTML标记 [英] How to change a HTML tag using JavaScript

问题描述

请注意以下代码：

  var element = document.CreateElement（div）; 
 element.toString（）; // [object HTMLDivElement] 
 
 var element = document.CreateElement（somerandomtag）; 
 element.toString（）; // [对象HTMLUnknownElement] 
  

我的直觉是一旦创建了一个元素， 强类型（如果在JavaScript中存在这样的事），因为 格 创建一个 HTMLDivElement 和 somerandomtag 创建 HTMLUnknownElement


请考虑下面的代码：$ b code $，因此，标签不能改变，因为创建的对象直接对应于该标签。

  var element = document.CreateElement（div）; 
 element.toString（）; // [object HTMLDivElement] 
 
 element.nodeName =span; //不起作用。 
 element.tagName =span; //不起作用。 
  

那么，是否可以将元素从一种类型（例如div）更改为另一种类型（例如跨度）超过对象的创建？





编辑：请注意...必须完成纯JavaScript ...否jQuery或其他库/ apis

解决方案

元素的tagName是只读的（不可变的），不管元素是什么。如果不重建DOM，则无法更改元素的标记名称。这是不可能改变现有的元素，但创建一个新元素并追加现有元素的子元素并不难。

  VAR节点= document.querySelector（ 'DIV'），
 newNode =使用document.createElement（ '跨度'），
父= node.parentNode，
儿童= node.childNodes; 
 
 Array.prototype.forEach.call（children，function（elem）{
 newNode.appendChild（elem）; 
}）; 
 parent.replaceChild（newNode，node）; 
  

http://jsfiddle.net/ExplosionPIlls/wwhKp/

Consider the following code:

var element = document.CreateElement("div");
element.toString(); // [object HTMLDivElement]

var element = document.CreateElement("somerandomtag");
element.toString(); // [object HTMLUnknownElement]

My gut instinct is that once an element has been created, it is essentially "strongly typed" (if such a thing exists in JavaScript), because "div" creates a HTMLDivElement and "somerandomtag" creates a HTMLUnknownElement, thus, the tag cannot be changed, because the created object corresponds directly to that tag.

Consider the following code:

var element = document.CreateElement("div");
element.toString(); // [object HTMLDivElement]

element.nodeName = "span"; // Doesn't work.
element.tagName = "span"; // Doesn't work.

So, is it possible to change an element from one type (e.g. "div") to another type (e.g. "span") beyond the object's creation?

EDIT: Please note...MUST be done with pure javascript...NO jQuery or other libraries/apis

解决方案

An element's tagName is readonly (immutable) no matter what the element is. You cannot change an element's tag name without some rebuilding of the DOM. That is it's not possible to change an existing element, but it's not that difficult to create a new element and append the existing element's children.

var node = document.querySelector('div'),
    newNode = document.createElement('span'),
    parent = node.parentNode,
    children = node.childNodes;

Array.prototype.forEach.call(children, function (elem) {
    newNode.appendChild(elem);
});
parent.replaceChild(newNode, node);

http://jsfiddle.net/ExplosionPIlls/wwhKp/

这篇关于如何使用JavaScript更改HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！