JavaScript は Web ページ要素 (ボタン、テキストなど) の自動生成を実装します

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript は Web ページ要素 (ボタン、テキストなど) の自動生成を実装します_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:30 PM

要素を作成するメソッド:

1. createTextNode() を使用してテキストオブジェクトを作成します
2. createElement() を使用してラベルオブジェクトを作成します
3. コンテナタグで属性を直接使用します: innerHTML - 本質的に、タグコンテナ内の「HTML コード」の変更は、私たちが考えるようなオブジェクトツリーの操作ではありません。

詳細コード:

<body> 
 <input type="button" value="创建并添加节点1" onclick="addNode1()"/> 
 <input type="button" value="创建并添加节点2" onclick="addNode2()"/> 
 <input type="button" value="创建并添加节点3" onclick="addNode3()"/> 
 <input type="button" value="remove节点1 " onclick='removenode()'/> 
 <input type="button" value="replaceNode节点2替换 " onclick='remove2()'/><!--1替换2，并且1没有保留--> 
 <input type="button" value="clone替换 " onclick='clone()'/> 
 <div id="div_id1">这是div模块--</div> 
 <div id="div_id2">必须好好地学习，这样才能让自己有很好的回报</div> 
 <div id="div_id3">好好干，加油↖(^ω^)↗</div> 
 <div id="div_id4">你懂得区域，实验区域</div>   
</body>

ログイン後にコピー

方法 1: テキストドキュメントを作成する

<span style="font-size:18px;">function addNode1(){ 
   //1利用createTextNode()创建一个文本对象 
   var text=document.createTextNode("这是修改的，创建的文档"); 
   //2获取div对象 
   var node1=document.getElementById("div_id1"); 
   //添加成div对象的孩子 
   node1.appendChild(text);}</span><span style="font-size:24px;"> 
</span>

ログイン後にコピー

方法 2: createElement() を使用してラベルオブジェクトを作成します

function addNode2(){ 
   //1,利用createElement（）创建一个标签对象 
   var nn=document.createElement("input"); 
   nn.type="button" 
   nn.value="创建的按钮"; 
   nn.target="_blank"; 
   //2,获得div对象 
   var node2=document.getElementById("div_id2"); 
   //添加成div对象的孩子 
   node2.appendChild(nn); 
  }

ログイン後にコピー

方法 3: コンテナタグの属性を直接使用します: innerHTML-----本質的にタグコンテナ内の「HTML コード」を変更します。これは私たちが考えるようなオブジェクトツリー操作ではありません

function addNode3(){ 
    var mm=document.getElementById("div_id3"); 
    mm.innerHTML="<a href='http://www.baidu.com'><input type='button' value='新建的按钮'></a>"; 
    }

ログイン後にコピー

要素から子ノードを削除するには、removeNode とremoveChild を使用します。通常は 2 番目のメソッドが使用されます。

function removenode(){ 
   var node =document.getElementById("div_id4"); 
//   alert(node.nodeName);//DIV 
//  自杀式 node.removeNode(true); //removeNode 从文档层次中删除对象。ie可以出现现象，一般不采用自杀式 
   node.parentNode.removeChild(node);////通过父节点去删除它的孩子,一般常用 
   alert("aa"); 
  }

ログイン後にコピー

function remove2(){ 
   var node1 =document.getElementById("div_id1"); 
   var node2 =document.getElementById("div_id2"); 
//   node1.replaceNode(node2);//自杀式不通用 
////通过父节点去替换它的孩子：用node1去替换node2 
   node1.parentNode.replaceChild(node1,node2);//object.replaceChild(oNewNode, oChildNode) 
  }

ログイン後にコピー

function clone(){ 
  var node1 =document.getElementById("div_id1"); 
  var node2 =document.getElementById("div_id2"); 
  var node1_2=node1.cloneNode(true);//false只能clone基本的，不会clone下面的其他子节点 
  //克隆一个对象,默认参数为false。参数为true时，连子节点一起克隆 
  node1.parentNode.replaceChild(node1_2,node2); 
 }

ログイン後にコピー

レンダリング:

完全なソースコード:

<!DOCTYPE html> 
<html> 
 <head> 
 <title>DOM_operation.html</title> 
 <style type="text/css"> 
  div{ 
   border:#00f solid 1px; 
   width:200px; 
   height:100px; 
  } 
 </style> 
 <script type="text/javascript"> 
//AAAA 增  
  //方式一 创建文本文档 
  function addNode1(){ 
   //1利用createTextNode()创建一个文本对象 
   var text=document.createTextNode("这是修改的，创建的文档"); 
   //2获取div对象 
   var node1=document.getElementById("div_id1"); 
   //添加成div对象的孩子 
   node1.appendChild(text); 
  } 
   
  function addNode2(){ 
   //1,利用createElement（）创建一个标签对象 
   var nn=document.createElement("input"); 
   nn.type="button" 
   nn.value="创建的按钮"; 
   nn.target="_blank"; 
   //2,获得div对象 
   var node2=document.getElementById("div_id2"); 
   //添加成div对象的孩子 
   node2.appendChild(nn); 
  } 
   
  //直接利用容器标签中的一个属性：innerHTML-----本质上改该标签容器中的“html代码”，不是我们认为的对象树的操作 
  function addNode3(){ 
    var mm=document.getElementById("div_id3"); 
    mm.innerHTML="<a href='http://www.baidu.com'><input type='button' value='新建的按钮'></a>"; 
     
  } 
//BBBBBB-------删   
  //删除节点 使用 removeNode 和 removeChild 从元素上删除子结点两种方法，通常采用第二种方法 
  function removenode(){ 
   var node =document.getElementById("div_id4"); 
//   alert(node.nodeName);//DIV 
//  自杀式 node.removeNode(true); //removeNode 从文档层次中删除对象。ie可以出现现象，一般不采用自杀式 
   node.parentNode.removeChild(node);////通过父节点去删除它的孩子,一般常用 
   alert("aa"); 
  } 
  //替换 没有保留替换的那个 
  function remove2(){ 
   var node1 =document.getElementById("div_id1"); 
   var node2 =document.getElementById("div_id2"); 
//   node1.replaceNode(node2);//自杀式不通用 
////通过父节点去替换它的孩子：用node1去替换node2 
   node1.parentNode.replaceChild(node1,node2);//object.replaceChild(oNewNode, oChildNode) 
  } 
  function clone(){ 
   var node1 =document.getElementById("div_id1"); 
   var node2 =document.getElementById("div_id2"); 
   var node1_2=node1.cloneNode(true);//false只能clone基本的，不会clone下面的其他子节点 
   //克隆一个对象,默认参数为false。参数为true时，连子节点一起克隆 
   node1.parentNode.replaceChild(node1_2,node2); 
  } 
 </script> 
 </head> 
 
 <body> 
 <input type="button" value="创建并添加节点1" onclick="addNode1()"/> 
 <input type="button" value="创建并添加节点2" onclick="addNode2()"/> 
 <input type="button" value="创建并添加节点3" onclick="addNode3()"/> 
 <input type="button" value="remove节点1 " onclick='removenode()'/> 
 <input type="button" value="replaceNode节点2替换 " onclick='remove2()'/><!--1替换2，并且1没有保留--> 
 <input type="button" value="clone替换 " onclick='clone()'/> 
 <div id="div_id1">这是div模块--</div> 
 <div id="div_id2">必须好好地学习，这样才能让自己有很好的回报</div> 
 <div id="div_id3">好好干，加油↖(^ω^)↗</div> 
 <div id="div_id4">你懂得区域，实验区域</div> 
  
  
 </body> 
</html>

ログイン後にコピー

上記は、JavaScript を使用して Web ページ要素を自動的に生成する方法を共有するものであり、学習に役立つことを願っています。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。