jqueryで要素を持たないテキストに要素を追加する方法

Question

参考画像

<div class="btn01">
<a href="./">
<div class="btn-in">
<span class="btn-icon"><i class="fas fa-flag"></i></span>
テキスト
</div>
</a>
</div>

jqueryで要素を持たない「テキスト」の部分に要素を追加し以下のようにする方法はありますか？

<span class="btn-icon"><i class="fas fa-flag"></i></span>
<div class="btn-text">テキスト</div>

最後の行?に見えるのでlast-childで指定できないか、.wrapInnerでbtn-iconを指定して一緒に囲めないか試したのですが無理でした。

Comments

[kei344]

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）また、試されたコードも質問文に追記してください。

[snof]

画像を追加できました。ありがとうございます。

Answer 1

$(".btn-in").contents().filter(function() {
  return this.nodeType === Node.TEXT_NODE && this.textContent.replace(/\s/g, "").length > 0;
}).wrap('<div class="btn-text">');

Comments

[snof]

完璧に動作できました。ありがとうございます。

Answer 2

jQueryを使った方法は知らないけれど, 生のDOMを使って良いならこんな感じで.

{
	const btn = document.querySelector(".btn-in>.btn-icon");
	const div = document.createElement("div");
	div.classList.add("btn-text");
	let node;
	while(node = btn.nextSibling, node && node.nodeType == Node.TEXT_NODE){
		div.textContent += node.nodeValue;
		node.remove();
	}
	btn.parentNode.insertBefore(div, btn.nextElementSibling);
}

基準となるノード(ここではbtn-iconクラスのノード)を基準に後続のノードを取得し, ノードがありかつそのノードがテキストノードの場合に新たに挿入するdiv要素にその中身をコピーします.

---

対象が複数あるならループで回すだけですよ.

{
	const btns = document.querySelectorAll(".btn-in>.btn-icon");
	for(let i = 0, len = btns.length; i < len; i++){
		const btn = btns[i];
		const div = document.createElement("div");
		div.classList.add("btn-text");
		let node;
		while(node = btn.nextSibling, node && node.nodeType == Node.TEXT_NODE){
			div.textContent += node.nodeValue;
			node.remove();
		}
		btn.parentNode.insertBefore(div, btn.nextElementSibling);
	}
}

Comments

[snof]

$(function() {
const btn = document.querySelector(".btn-in>.btn-icon");
const div = document.createElement("div");
div.classList.add("btn-text");
let node;
while(node = btn.nextSibling, node && node.nodeType == Node.TEXT_NODE){
div.textContent += node.nodeValue;
node.remove();
}
btn.parentNode.insertBefore(div, btn.nextElementSibling);
});

jsファイルにこのように記載したところ、正常にタグが挿入されました。ただbtnが複数ある場合に最初の１つ目しか挿入されませんでしたのでdocument.querySelectorAllと書き換えてみましたがダメでした。説明不足で申し訳ありません。

[defghi1977]

一応技術的にはどうとでもなりますが, メンテナンスを考えるとやはり静的にdiv要素を記述したほうがよかろうと思います.

Answer 3

defghi1977さんとやっていることは似ていますが、
jQueryバージョンです。

$(function(){

var targetDOM = $(".btn-in").eq(0);
//一旦こ要素を変数に逃がす。
var childrens = targetDOM.children();

// 一旦、子要素削除
$(".btn-in").eq(0).children().remove();
// テキストを取得
var textOnly = targetDOM.text();

// テキストも一旦削除
targetDOM.empty();

// 改めて要素を入れていく
targetDOM.append(childrens);
targetDOM.append('<div class="btn-text">' + textOnly + '</div>');

});

いったん、子要素を変数に逃し、
子要素を消して、
テキストのみを抽出し変数に逃がし、削除、
改めて、親要素の中に、
子要素と、要素を追加したテキストを入れ込んでます。

Comments

[snof]

ありがとうございます。試したところ、btnが複数ある場合に最初の一つしか適用されませんでした。説明不足で申し訳ありません。

[miyabi_pudding]

であれば、.eq(0)を取れば、大丈夫かと。