diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-03-02 23:08:13 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-03-10 22:56:58 +0900 |
| commit | 7d9629e268d787683dbb5e29e228b3cb0a20e6ad (patch) | |
| tree | d1c7d8b1022708703d75a675df576f0da0a6b393 /files/ja/web/api/element/append | |
| parent | 5fab0a1eb99e87aa141adb3777d92c69437ae971 (diff) | |
| download | translated-content-7d9629e268d787683dbb5e29e228b3cb0a20e6ad.tar.gz translated-content-7d9629e268d787683dbb5e29e228b3cb0a20e6ad.tar.bz2 translated-content-7d9629e268d787683dbb5e29e228b3cb0a20e6ad.zip | |
2021/09/15 時点の英語版に同期
Diffstat (limited to 'files/ja/web/api/element/append')
| -rw-r--r-- | files/ja/web/api/element/append/index.md | 97 |
1 files changed, 48 insertions, 49 deletions
diff --git a/files/ja/web/api/element/append/index.md b/files/ja/web/api/element/append/index.md index 82feaa6f91..ffe3f44068 100644 --- a/files/ja/web/api/element/append/index.md +++ b/files/ja/web/api/element/append/index.md @@ -4,97 +4,96 @@ slug: Web/API/Element/append tags: - API - DOM - - Method + - メソッド - Node - Element - - Reference + - リファレンス browser-compat: api.Element.append translation_of: Web/API/Element/append original_slug: Web/API/ParentNode/append --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p> +**`Element.append()`** メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを `Element` のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。 -<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p> +{{domxref("Node.appendChild()")}} との違いは次の通りです。 -<ul> - <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li> - <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li> - <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li> -</ul> +- `Element.append()` は {{domxref("DOMString")}} も追加することができますが、`Node.appendChild()` は{{domxref("Node")}} オブジェクトのみを受け付けます。 +- `Element.append()` には返値がありませんが、`Node.appendChild()` は追加された {{domxref("Node")}} オブジェクトを返します。 +- `Element.append()` は複数のノードや文字列を追加することができますが、`Node.appendChild()` はノードを 1 つだけしか追加することができせん。 -<h2 id="Syntax">構文</h2> +## 構文 -<pre class="brush: js"> +```js append(...nodesOrDOMStrings) -</pre> +``` -<h3 id="Parameters">引数</h3> +### 引数 -<dl> - <dt><code>nodesOrDOMStrings</code></dt> - <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> -</dl> +- `nodesOrDOMStrings` + - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。 -<h3 id="Exceptions">例外</h3> +### 例外 -<ul> - <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の位置に挿入することができません。</li> -</ul> +- `HierarchyRequestError` {{DOMxRef("DOMException")}} + - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。 -<h2 id="Examples">例</h2> +## 例 -<h3 id="Appending_an_element">要素の追加</h3> +### 要素の追加 -<pre class="brush: js">let div = document.createElement("div") +```js +let div = document.createElement("div") let p = document.createElement("p") div.append(p) -console.log(div.childNodes) // NodeList [ <p> ] -</pre> +console.log(div.childNodes) // NodeList [ <p> ] +``` -<h3 id="Appending_text">テキストの追加</h3> +### テキストの追加 -<pre class="brush: js">let div = document.createElement("div") +```js +let div = document.createElement("div") div.append("Some text") -console.log(div.textContent) // "Some text"</pre> +console.log(div.textContent) // "Some text" +``` -<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3> +### 要素とテキストの追加 -<pre class="brush: js">let div = document.createElement("div") +```js +let div = document.createElement("div") let p = document.createElement("p") div.append("Some text", p) -console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]</pre> +console.log(div.childNodes) // NodeList [ #text "Some text", <p> ] +``` -<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3> +### append メソッドはスコープが効かない -<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> +`append()` メソッドは `with` 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。 -<pre class="brush: js">let div = document.createElement("div") +```js +let div = document.createElement("div") with(div) { append("foo") } -// ReferenceError: append is not defined </pre> +// ReferenceError: append is not defined +``` - -<h2 id="Specifications">仕様書</h2> +## 仕様書 {{Specifications}} -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat}}</p> +{{Compat}} -<h2 id="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{domxref("Element.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Element.after()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> +- {{domxref("Element.prepend()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Element.after()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("NodeList")}} |
