Comment implémenter le nœud d'insertion DOM dans JS-js tutoriel-php.cn

Comment implémenter le nœud d'insertion DOM dans JS

php中世界最好的语言

Libérer： 2018-04-08 10:55:19

original

2353 Les gens l'ont consulté

Cette fois, je vais vous montrer comment implémenter des nœuds d'insertion DOM avec JS. Quelles sont les précautions pour implémenter des nœuds d'insertion DOM avec JS. Ce qui suit est un cas pratique, jetons un coup d'œil.

L'exemple de cet article décrit l'opération de nœud d'insertion DOM implémentée par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1 Introduction

L'insertion de nœuds est réalisée en utilisant insertBefore() méthode. 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 à insérer dans la zone de texte de la page, puis cliquez. Le bouton « Insérer avant » » insère du texte dans la page.

Trois exemples de codes complets :

<!DOCTYPE html>
<html>
<head>
<title>插入节点</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>

Copier après la connexion

Je crois que vous lirez le cas dans cet article Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de mint-ui dans vue

Comment implémenter Angular Fonction HMR

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!