Ajout d'éléments HTML avec JavaScript

Question

Donc, si je HTML comme ceci:

<div id='div'> 
    <a>Link</a> 

    <span>text</span> 
</div> 

Comment puis-je utiliser JavaScript pour ajouter un élément HTML où cette ligne vide est?

Answer 1

Comme vous ne l'avez pas mentionné l'utilisation de javascript bibliothèques (comme jquery, dojo), voici quelque chose javascript pur.

var txt = document.createTextNode(" This text was added to the DIV."); 
var parent = document.getElementById('div'); 
parent.insertBefore(txt, parent.lastChild); 

ou

var link = document.createElement('a'); 
link.setAttribute('href', 'mypage.htm'); 
var parent = document.getElementById('div'); 
parent.insertAfter(link, parent.firstChild); 

Bonne programmation.

Answer 2

Si vous voulez utiliser quelque chose comme jQuery vous pouvez faire quelque chose comme ceci:

$('#div a').after("Your html element"); 

Answer 3

jQuery a une belle, construite en fonction de celle-ci: après(), à http://api.jquery.com/after/

Dans votre cas, vous voudrez probablement un sélecteur comme celui-ci:

$('#div a').after('<p>html element to add</p>'); 

Les exemples de code de la Le lien donné ci-dessus montre aussi comment charger jQuery si cela vous est nouveau.

Answer 4

En supposant que vous ajoutez seulement un élément:

document.getElementById("div").insertBefore({Element}, document.getElementById("div").children[2]); 

Answer 5

Au lieu de traiter avec les enfants de <div>, comme d'autres réponses, si vous savez que vous voulez toujours insérer après l'élément <a>, lui donner un ID, puis vous pouvez insérer par rapport à ses frères et soeurs:

<div id="div"> 
    <a id="div_link">Link</a> 

    <span>text</span> 
</div> 

et puis insérez votre nouvel élément directement après cet élément:

var el = document.createElement(element_type); // where element_type is the tag name you want to insert 
// ... set element properties as necessary 

var div = document.getElementById('div'); 
var div_link = document.getElementById('div_link'); 
var next_sib = div_link.nextSibling; 

if (next_sib) 
{ 
    // if the div_link has another element following it within the link, insert 
    // before that following element 
    div.insertBefore(el, next_sib); 
} 
else 
{ 
    // otherwise, the link is the last element in your div, 
    // so just append to the end of the div 
    div.appendChild(el); 
} 

Ceci vous permettra de toujours garantir que votre nouvel élément suit le lien.

Answer 6

node = document.getElementById('YourID'); 
node.insertAdjacentHTML('afterend', '<div>Sample Div</div>'); 

Options disponibles

beforebegin, afterBegin, beforeend, AfterEnd