Maison > Article > interface Web > Comment ajouter un paragraphe en javascript
Comment ajouter un paragraphe en javascript
- 藏色散人original
- 2021-07-01 11:01:173788parcourir
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.
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>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>, 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>La méthode DOM
createElement方法：document.createElement(nodeName)
crée un nouvel élément Le code suivant crée un élément p.
var insertElement = document.createElement("p")
appendChild方法：parent.appendChild(child)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);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);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);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!