JavaScript は HTML ページ要素の追加や削除などを動的に変更します。-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript は HTML ページ要素の追加や削除などを動的に変更します。

不言

May 07, 2018 pm 04:06 PM

html javascript js

この記事では、HTML ページ要素を動的に変更する (追加や削除など) ための JavaScript を紹介します。必要な場合は、それを参照してください。たとえば、HTML に要素を追加したり、要素を削除したりできるサンプルコードを次に示します。興味のある方は、JavaScript を使用して HTML に要素を追加することができます。タグを作成し、対応するコンテンツをラベルに追加し、作成したラベルを対応する場所に追加します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>测试文档</title> 
<script type="text/javascript"> 
function add(){ 
var element = document.createElement("p"); 
var node = document.createTextNode("添加新段落"); 
element.appendChild(node); 
x = document.getElementById("demo"); 
x.appendChild(element); 
} 
</script> 
</head> 
<body> 
<p id="demo"> 
<p>这是第一段</p> 
</p> 
<input type="button" value="按钮" onclick="add()" /> 
</body> 
</html>

ログイン後にコピー

HTMLの要素を削除する

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>测试文档</title> 
<script type="text/javascript"> 
function deleteE(){ 
var father = document.getElementById("demo"); 
var child = document.getElementById("p1"); 
father.removeChild(child); 
} 
</script> 
</head> 
<body> 
<p id="demo"> 
<p id="p1">这是第一段</p> 
<p id="p2">这是第二段</p> 
</p> 
<input type="button" value="删除" onclick="deleteE()" /> 
</body> 
</html>

ログイン後にコピー

関連推奨事項:

JavaScriptタイミングイベントを理解して使用する方法

JavaScript は動的に Li 要素を追加します

JavaScriptでHTMLタグを動的に作成する方法例まとめ

以上がJavaScript は HTML ページ要素の追加や削除などを動的に変更します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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