jqueryで兄弟ノードを追加する方法-フロントエンドQ&A-php.cn

jqueryで兄弟ノードを追加する方法

青灯夜游

リリース： 2022-04-27 17:59:34

オリジナル

4766 人が閲覧しました

jquery で兄弟ノードを追加する方法: 1. before()、構文 "$(指定された要素).before(兄弟ノード)" を使用すると、指定された要素の前に兄弟ノードを挿入できます。 after() の構文 "$(指定された要素).after(兄弟ノード)" を使用すると、指定された要素の後に兄弟ノードを挿入できます。

jqueryで兄弟ノードを追加する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery では、次の 2 つのメソッドを使用して兄弟ノードを追加できます。

before() メソッド: 選択した要素の前に指定したコンテンツを挿入します。
after() メソッド: 選択した要素の後に指定したコンテンツを挿入します。

#1. before() を使用して兄弟ノードを前方に追加します

before() は指定された要素の前に兄弟ノードを挿入できます

構文:

$(A).before(B)

ログイン後にコピー

は、B 兄弟ノードを A ノードの前に挿入することを意味します。

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                var a = "<span style=&#39;color:red;&#39;>一个span元素</span>";
                $("div").before(a);
            })
        })
    </script>
	</head>
	<body>
		<h1>一个大标题</h1>
		<p>一个p段落</p>
		<div>一个div元素</div>
		<p>一个p段落</p>
		<button>在div前插入一个兄弟节点</button>
	</body>
</html>

ログイン後にコピー

jqueryで兄弟ノードを追加する方法

2. after() を使用して兄弟ノードを後方に追加します

after() は、指定された要素の後に兄弟ノードを挿入できます。

構文:

$(A).after(B)

ログイン後にコピー

は、A ノードの外側の後に B 兄弟ノードを挿入することを意味します。

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                var a = "<span style=&#39;color:red;&#39;>一个span元素</span>";
                $("div").after(a);
            })
        })
    </script>
	</head>
	<body>
		<h1>一个大标题</h1>
		<p>一个p段落</p>
		<div>一个div元素</div>
		<p>一个p段落</p>
		<button>在div前插入一个兄弟节点</button>
	</body>
</html>

ログイン後にコピー

jqueryで兄弟ノードを追加する方法