Maison  >  Article  >  interface Web  >  Quelle est la méthode pour créer un nouveau nœud en javascript

Quelle est la méthode pour créer un nouveau nœud en javascript

醉折花枝作酒筹
醉折花枝作酒筹original
2021-07-16 11:08:264561parcourir

Les méthodes sont : 1. createElement(), crée des nœuds d'élément ; 2. createTextNode(), crée des nœuds de texte ; 3. createComment(), crée des nœuds de commentaire ; 4. createDocumentFragment(), crée des nœuds de fragment de document.

Quelle est la méthode pour créer un nouveau nœud en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

(1)document.createElement(tagName)

createElement() est utilisé pour créer un nœud d'élément, c'est-à-dire un nœud avec nodeType=1. Parmi eux, tagName est le nom de la balise HTML et un objet nœud sera renvoyé.

(2)document.createTextNode(text)

createTextNode() est utilisé pour créer un nœud de texte, c'est-à-dire un nœud avec nodeType=3. Parmi eux, le texte est le contenu du nœud de texte, et un objet nœud sera renvoyé.

(3)document.createComment(comment)

createComment() est utilisé pour créer un nœud de commentaire, c'est-à-dire un nœud avec nodeType=8. Parmi eux, le commentaire est le contenu du commentaire et un objet nœud sera renvoyé.

(4)document.createDocumentFragment);

createDocumentFragment() est utilisé pour créer des nœuds de fragments de document. Les nœuds de fragments de document sont une collection de plusieurs nœuds DOM, qui peuvent inclure différents types de nœuds, tels que des nœuds d'éléments, des nœuds de texte, des nœuds de commentaires, etc. Le nœud de fragment de document est vide lors de sa création initiale et des nœuds doivent y être ajoutés.

Par exemple, créez la balise dc6dce4a544fdca2df29d5ac0ea9906b comme suit :

wvarpp = document.createElement("div") //Le code suivant est utilisé pour créer l'élément dc6dce4a544fdca2df29d5ac0ea9906b createTextNode("Ceci est un nouveau paragraphe. ")//Ajoutez un nœud de texte à l'élément dc6dce4a544fdca2df29d5ac0ea9906b :

pp.appendChild(node); //Ajoutez un nœud de texte à l'élément dc6dce4a544fdca2df29d5ac0ea9906b element=document.getElementById( "div1"); //Enfin, ajoutez l'élément p à un élément existant. Rechercher des éléments existants :

element.appendChild(pp); //Ajouter aux éléments existants

Utiliser la méthode insertBefore() : ajouter de nouveaux éléments à la position de départ

<body>
<div id="div1">
<p id="p1">这是一个段落。 </p>
<pid="p2">这是另外一个段落。</p>
</div>
<script>
var pp = document.createElement("div") //以下代码是用于创建<div>元愫
var node=document.createTextNode("这是新段落。")://为 <div>元素添加文本节点
pp.appendChild(node); //将文本节点添加到<div>元素中
var element=document.getElementById("div1"); //最后,在-一个已存在的元素中添加div元素。查找已存在的元素:
element.appendChild(pp); //添加到已存在的元素中:
</script>
</body>

[Apprentissage recommandé :

Tutoriel avancé javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn