javascript(jQueryなし)で取得したオブジェクトのタグを変更するにはどうすればよいのでしょうか？

いつもお世話になっております。

<div id="id1" class="class1">abc</div>

というHTMLがあり、それを

<span id="id1" class="class1">abc</span>

とjavascriptで動的に書き換えたいと考えております。jQueryを使用してはいけない状態で行うには

var tag = document.getElementById("#id1");
tag・・・・

どのように続けていけばよいのでしょうか？
おわかりになる方いらっしゃいましたら、是非よろしくお願いいたします

miyabi_pudding

2020/02/06 04:25

何をどのように変更したいのかを提示してください。

行動規範の内容に同意します

回答4件

属性の引き継ぎとかあるのでこんな感じで

codepen

投稿2020/02/06 05:00

yambejp

総合スコア116835

yambejp

2020/02/06 05:44 編集

調整版： document.querySelector('#change').addEventListener('click',()=>{ var n1=document.querySelector('#id1'); var tag=n1.nodeName=="DIV"?"span":"div"; var n2=document.createElement(tag); [...n1.attributes].forEach(x=>{ n2.setAttribute(x.nodeName,x.nodeValue); }); n2.innerHTML=n1.innerHTML; n1.parentNode.insertBefore(n2,n1); n1.parentNode.removeChild(n1); });

行動規範の内容に同意します

ベストアンサー

要素名だけ変えることはできないので、別の要素を作って地道にコピーしていくしかないです。

JavaScript
1var tag = document.getElementById('id1'); // 注意
2var span = document.createElement('span');
3for (var i = 0, len = tag.attributes.length; i < len; i++) {
4  span.attributes.setNamedItem(tag.attributes[i].cloneNode());
5}
6
7while (tag.hasChildNodes()) {
8  span.appendChild(tag.childNodes[0]);
9}
10
11tag.parentNode.replaceChild(span, tag);