interface Web
js tutoriel
JavaScript implémente la génération automatique d'éléments de page Web (boutons, texte, etc.)_compétences Javascript
JavaScript implémente la génération automatique d'éléments de page Web (boutons, texte, etc.)_compétences Javascript
Méthodes pour créer des éléments :
- 1. Utilisez createTextNode() pour créer un objet texte
- 2. Utilisez createElement() pour créer un objet étiquette
- 3. Utiliser directement un attribut dans la balise conteneur : innerHTML - essentiellement, changer le "code html" dans le conteneur de balises n'est pas une opération de l'arborescence des objets comme nous le pensons
Code détaillé :
<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>
Méthode 1 : Créer un document texte
<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>
Méthode 2 : utilisez createElement() pour créer un objet étiquette
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);
}
Méthode 3 : Utiliser directement un attribut dans la balise conteneur : innerHTML-----changer essentiellement le "code html" dans le conteneur de balises, ce qui n'est pas une opération d'arborescence d'objets comme nous le pensons
function addNode3(){
var mm=document.getElementById("div_id3");
mm.innerHTML="<a href='http://www.baidu.com'><input type='button' value='新建的按钮'></a>";
}
- Supprimer le nœud
Utilisez RemoveNode et RemoveChild pour supprimer les nœuds enfants d'un élément. La deuxième méthode est généralement utilisée
.
function removenode(){
var node =document.getElementById("div_id4");
// alert(node.nodeName);//DIV
// 自杀式 node.removeNode(true); //removeNode 从文档层次中删除对象。ie可以出现现象，一般不采用自杀式
node.parentNode.removeChild(node);////通过父节点去删除它的孩子,一般常用
alert("aa");
}
- Le remplacement ne conserve pas celui remplacé
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)
}
- nœud clone
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);
} Rendu :
Code source complet :
<!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> Ce qui précède vise à partager avec vous comment générer automatiquement des éléments de page Web via JavaScript. J'espère que cela vous sera utile pour votre apprentissage.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal?
Apr 04, 2025 pm 02:06 PM
Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...
