Maison > Article > interface Web > Résumé des méthodes d'insertion de nœuds d'objet DOM à l'aide de JS

Résumé des méthodes d'insertion de nœuds d'objet DOM à l'aide de JS

php中世界最好的语言original: 2018-06-11 14:30:561967parcourir

Cette fois, je vais vous apporter un résumé de la méthode d'insertion de nœuds d'objet DOM avec JS Quelles sont les précautions pour insérer des nœuds d'objet DOM avec JS Ce qui suit est un cas pratique, jetons un coup d'oeil.

1 Introduction

L'insertion de nœuds est réalisée à l'aide de la méthode insertBefore(). La méthode

insertBefore() insérera un nouveau nœud enfant avant un autre nœud enfant.

obj.insertBefore(new,ref)

new : Représente un nouveau nœud enfant.
ref : Spécifiez un nœud et insérez un nouveau nœud avant ce nœud.

Deuxième application

Insérer un nœud Dans cet exemple, saisissez le texte qui doit être inséré dans la zone de texte de la page, et puis cliquez sur le bouton « Insérer avant » » pour insérer du texte dans la page.

Trois exemples de codes complets :

<!DOCTYPE html>
<html>
<head>
<title>w插入节点</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(&#39;h&#39;,document.frm.txt.value);" />
 </form>
</body>
</html>

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus d'excitant. choses, veuillez faire attention à php chinois Autres articles connexes en ligne !

Lecture recommandée :

Utiliser JS pour créer une fonction de barre de progression animée

Résumé de l'accès JS au nœud d'objet DOM méthodes

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

Article précédent：Résumé des méthodes JS pour supprimer les nœuds d'objet DOMArticle suivant：Résumé des méthodes JS pour supprimer les nœuds d'objet DOM

Articles Liés

Voir plus