javascript - HTML 要素のタイプを変更する

Question

HTML 要素を別の要素に置き換えることはできますか?

しかし、私はコンテンツを空白にしたくありません。

から：

<a data-text="text">content</a>

に：

<div data-text="text">content</div>

何か案が？

Answer 1

いいえ。DOM ノードのtagName( ) は変更できません。nodeName

必要なタイプの新しいノードを作成し、すべての属性 (および場合によってはプロパティ) をコピーして、子ノードを移動することしかできませんでした。それでも、アタッチされたイベント リスナーのようなアクセスできないものは失われます。この手法は、たとえば、IEで an の型を変更するinput場合に使用されます。

aただし、 を に変更する理由はまったくありませんdiv。これらはまったく異なるセマンティクス (動作とレイアウトも) を持っています。

Answer 2

これは、この問題に対するより現代的な (2022 年以降) のアプローチです。

基本的に、新しい要素を作成し、それに属性を転送してから子を転送し、最後に要素を新しい要素に置き換えます。

のような大文字と小文字を区別する要素の例も提供しました<svg>。大文字と小文字を区別する目的で、を使用しないでくださいinnerHTML。代わりに でwhileループを使用しますappendChild。

function changeTag (node, tag) {
  const clone = createElement(tag)
  for (const attr of node.attributes) {
    clone.setAttributeNS(null, attr.name, attr.value)
  }
  while (node.firstChild) {
    clone.appendChild(node.firstChild)
  }
  node.replaceWith(clone)
  return clone
}

function createElement (tag) {
  if (tag === 'svg') {
    return document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  } else {
    return document.createElementNS('http://www.w3.org/1999/xhtml', tag)
  }
}

const node1 = document.getElementById('node1')
console.log(node1.outerHTML)
console.log(changeTag(node1, 'a').outerHTML)

const node2 = document.getElementById('node2')
console.log(node2.outerHTML)
console.log(changeTag(node2, 'svg-custom').outerHTML)

<p id="node1" class="x" rel="follow">
  Some <b class="a1">bold</b> text
</p>

 <svg id="node2" height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Answer 3

確かに、しかしなぜですか？

var a = ​document.getElementsByTagName('a');
var src, el, attrs;
for(var i=0,l=a.length;i<l;i++) {
    src = a[i];
    el = document.createElement('div');
    attrs = src.attributes;
    for(var j=0,k=attrs.length;j<k;j++) {
        el.setAttribute(attrs[j].name, attrs[j].value);
    }
    el.innerHTML = src.innerHTML;
    src.parentNode.replaceChild(el, src);
}

Answer 4

これは無効な HTML (div要素にhref属性がない) であり、リンクのようには機能しません。

ただし、JavaScript を使用して動作をエミュレートできます。

$('div').on('click', function() {
    location.href = $(this).attr('href');
});

しかし、これをしないでください。たとえば、中マウスクリック（新しいタブの場合）を中断します。

Answer 5

使用する

var href=$("#aId").attr('href');

$("#aId").replaceWith($("<div"+href+">" + $("#aId").innerHTML + "</div>"));

Answer 6

これを HTML コードで行う簡単な方法を次に示します。埋め込まれたスタイリングと JavaScript コードを少し使用すると、探している効果が得られます...

<div style="display: inline; color: blue;" onclick="window.location='link/url';">Click!</div>

Answer 7

短い現代のバニラの道

const atts = Array.prototype.slice.call(elem.attributes)
elem.outerHTML = `<div ${atts.map(
  attr => (attr.name + '="' + attr.value + '"')
).join(' ')}>${elem.innerHTML}</div>`

このソリューションは、タグ名を変換し、すべての属性を保持します。自分で要素を DOM から削除したり、DOM に追加したりする必要はありません。ブラウザーがそれを処理するため、変換後に要素にアクセスするには、DOM から要素を再読み込みする必要があります。

例

let elem = document.getElementById("test")
const tagName = 'div'

const atts = Array.prototype.slice.call(elem.attributes)
elem.outerHTML = `<${tagName} ${atts.map(
  attr => (attr.name + '="' + attr.value + '"')
).join(' ')}>${elem.innerHTML}</${tagName}>`

elem = document.getElementById("test") // reload required
console.log(elem.outerHTML)

<span id="test" data-test="123">I want to be a div.</span>

属性を保持する必要はありませんか?

elem.outerHTML = `<div id="test">${elem.innerHTML}</div>`

このワンライナーでそれを行いますがelem、上記のソリューションと同様に、古い要素を指すことを覚えておいてください。

例

let elem = document.getElementById("test")
const tagName = 'div'

elem.outerHTML = `<${tagName} id="test">${elem.innerHTML}</${tagName}>`

elem = document.getElementById("test") // reload required
console.log(elem.outerHTML)

<span id="test">I want to be a div.</span>

これらのメソッドでは、ブラウザーが新しい DOM 要素を作成して内部に配置するため、常に DOM からオブジェクトを再読み込みして操作を続行する必要があります。

Answer 8

<input id="tmpType" type="text" name="password" />

<script type="text/javascript">
    document.getElementById('tmpType').type = 'password';
</script>

これを使用して、動的フォームでパスワードを表示/非表示にしました