Comment puis-je insérer un élément d'étiquette avant un élément de saisie Google Custom Search?

Question

J'utilise insertBefore() pour essayer de placer un élément "label" devant un élément d'entrée Google Custom Search pour servir de texte d'espace réservé, mais avec mon code actuel j'obtiens l'erreur: "Impossible de lire la propriété 'insertBefore' de undefined ". Voici mon code:

window.onload = function() { 
     var el = document.getElementById('gsc-i-id1'); 
     el.setAttribute('placeholder', 'Enter your search term...'); 
     el.style.background = ''; 
     el.style.textIndent = '0'; 
     el.addEventListener('blur', function(e) { 
      e.target.style.backgroundImage = 'none'; 
      e.target.style.textIndent = '0'; 
      }, false); 

<!-- create absolutly positioned label as placeholder text for search --> 
     var searchParent = el.parentNode; 
     var label = document.createElement('label'); 
     var labelText = document.createTextNode('Enter your search term...'); 
     label.appendChild(labelText); 
     label.className += 'search-label-placeholder'; 
     console.log(searchParent); 
     console.log(label); 
     console.log(el); 
     document.searchParent.insertBefore(label, el); 

<!-- this doesn't work for adding a placeholder -->  
     var searchIcon = document.getElementById('search-icon'); 
     searchIcon.addEventListener('click', function(e) { 
       e.preventDefault(); 
       el.focus(function() { 
       el.setAttribute('placeholder', 'Enter your search term...'); 
       }); 
      }, false); 
     }; 
    </script> 

Answer 1

La solution était d'utiliser l'élément parent au lieu du document lors de l'utilisation insertBefore() .

searchParent.insertBefore(label, el); 

Answer 2

Essayez de remplacer cette ligne

document.searchParent.insertBefore(label, el); 

avec ceci:

document.insertBefore(label, searchParent);