ホームページ ウェブフロントエンド jsチュートリアル JS は DOM ノードを挿入します (コード付き)

JS は DOM ノードを挿入します (コード付き)

Apr 20, 2018 am 10:28 AM
javascript コード ノード

今回は DOM ノードの JS 挿入 (コード付き) についてお届けします。DOM ノードの JS 挿入の 注意事項 について、実際のケースを見てみましょう。

この記事の例では、JS によって実装された DOM 挿入ノードの操作について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1 はじめに

ノードの挿入は、insertBefore() メソッドを使用して実現されます。

insertBefore() メソッドは、別の子ノードの前に新しい子ノードを挿入します。

obj.insertBefore(new,ref)

new: 新しい子ノードを表します。
ref: ノードを指定し、このノードの前に新しいノードを挿入します。

2

を適用してノードを挿入します。この例では、ページのテキストボックスに挿入する必要があるテキストを入力し、[前に挿入]ボタンをクリックしてテキストをページに挿入します。 。

3 完全なサンプル コード:

<!DOCTYPE html>
<html>
<head>
<title>插入节点</title>
<script language="javascript">
 <!--
 function crNode(str)
 {
  var newP=document.createElement("p");
  var newTxt=document.createTextNode(str);
  newP.appendChild(newTxt);
  return newP;
 }
 function insetNode(nodeId,str)
 {
   var node=document.getElementById(nodeId);
   var newNode=crNode(str);
   if(node.parentNode) //判断是否拥有父节点
   node.parentNode.insertBefore(newNode,node);
 }
 -->
</script>
</head>
<body>
 <h2 id="h">在上面插入节点</h2>
 <form id="frm" name="frm">
 输入文本:<input type="text" name="txt" />
 <input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" />
 </form>
</body>
</html>
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS が選択した DOM ノードにアクセスする (コード付き)

vue での mint-ui の使用

以上がJS は DOM ノードを挿入します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ブルースクリーンコード0x0000001が発生した場合の対処方法 ブルースクリーンコード0x0000001が発生した場合の対処方法 Feb 23, 2024 am 08:09 AM

ブルースクリーンコード0x0000001が発生した場合の対処方法

win7ドライバーコード28を解決する方法 win7ドライバーコード28を解決する方法 Dec 30, 2023 pm 11:55 PM

win7ドライバーコード28を解決する方法

コンピューターが頻繁にブルー スクリーンになり、コードが毎回異なります コンピューターが頻繁にブルー スクリーンになり、コードが毎回異なります Jan 06, 2024 pm 10:53 PM

コンピューターが頻繁にブルー スクリーンになり、コードが毎回異なります

コード0xc000007bエラーを解決する コード0xc000007bエラーを解決する Feb 18, 2024 pm 07:34 PM

コード0xc000007bエラーを解決する

ブルー スクリーン コード 0x000000d1 は何を表しますか? ブルー スクリーン コード 0x000000d1 は何を表しますか? Feb 18, 2024 pm 01:35 PM

ブルー スクリーン コード 0x000000d1 は何を表しますか?

あらゆるデバイス上の GE ユニバーサル リモート コード プログラム あらゆるデバイス上の GE ユニバーサル リモート コード プログラム Mar 02, 2024 pm 01:58 PM

あらゆるデバイス上の GE ユニバーサル リモート コード プログラム

0x0000007fブルースクリーンコードの原因と解決策を詳しく解説 0x0000007fブルースクリーンコードの原因と解決策を詳しく解説 Dec 25, 2023 pm 02:19 PM

0x0000007fブルースクリーンコードの原因と解決策を詳しく解説

清華大学と Zhipu AI オープンソース GLM-4: 自然言語処理に新たな革命を起こす 清華大学と Zhipu AI オープンソース GLM-4: 自然言語処理に新たな革命を起こす Jun 12, 2024 pm 08:38 PM

清華大学と Zhipu AI オープンソース GLM-4: 自然言語処理に新たな革命を起こす

See all articles