Comment ajouter un paragraphe en javascript-js tutoriel-php.cn

Comment ajouter un paragraphe en javascript

藏色散人

Libérer： 2023-01-07 11:41:33

original

3832 Les gens l'ont consulté

javascript Méthodes pour ajouter un paragraphe : 1. Insérez un paragraphe html via la méthode "document.write" 2. Insérez un paragraphe html via la méthode DOM.

Comment ajouter un paragraphe en javascript

L'environnement d'exploitation de cet article : système Windows7, javascript version 1.8.5, ordinateur DELL G3

Comment ajouter un paragraphe en javascript ?

javaScript insérer la méthode de paragraphe html

Méthode traditionnelle :

document.write méthode

peut être insérée directement à l'endroit nécessaire Insérez

<body>
  <script>
    document.write("<p>This is inserted.</p>");
  </script>
</body>

Copier après la connexion

via la balise de script ou déplacez-le vers une fonction externe

<body>
  <script>
    insertParagraph("This is inserted");
  </script>
...
<script>
function insertParagraph(text){
  var str = "<p>"+text+"</p>"
  document.write(str)
}
</script>
</body>

Copier après la connexion

, mais dans les deux cas, le code JavaScript et le code HTML seront mélangés, ce qui n'est pas une bonne pratique.

innerHTML attribut

innerHTML peut écrire du code HTML ou lire du code HTML sous le nœud sélectionné. L'insertion via innerHTML remplace directement tout le contenu sous le nœud sélectionné.

<div id="insert">
  <p>This will be overwritten.</p>
</div>
<script>
window.onload = function(){
  var insertDiv = document.getElementById("insert")
  alert（insertDiv.innerHTML）
  insertDiv.innerHTML = "<p>This is inserted.</p>"
}
</script>

Copier après la connexion

La méthode DOM

createElement方法：document.createElement(nodeName)

Copier après la connexion

crée un nouvel élément Le code suivant crée un élément p.

var insertElement = document.createElement("p")
appendChild方法：parent.appendChild(child)

Copier après la connexion

Faire de ce nœud un nœud enfant du nœud cible

var insertElement = document.createElement("p");
document.getElementById("insert").appendChild(insertElement);
creatTextNode方法：document.createTextNode(text);

Copier après la connexion

Similaire à la méthode createElement, mais crée un nœud de texte

var txt = document.createTextNode("New insert text.");
insertElement.appendChild(txt);
insertBefore方法： parentElement.insertBefore(newElement,targetElement);

Copier après la connexion

Insérer un nouvel élément dans un There existant sont des éléments devant. Où parentElement est l'élément parent de l'élément cible, newElement est l'élément que vous souhaitez insérer et targetElement est l'élément que vous souhaitez insérer devant lui.

var newInsertElement = document.createElement("p");
insertDiv.insertBefore(newInsertElement,insertDiv);

Copier après la connexion

Etude recommandée : "Javascript Advanced Tutorial"

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!