Wie kann ich ein Beschriftungselement vor einem Eingabeelement für die benutzerdefinierte Suche von Google einfügen?

Question

Ich verwende insertBefore(), um ein "Label" -Element vor einem Google Custom Search-Eingabeelement als Platzhaltertext zu platzieren, aber mit meinem aktuellen Code erhalte ich den Fehler: "Eigenschaft 'insertBefore' von undefined kann nicht gelesen werden ". Hier ist mein 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

Die Lösung, die das übergeordnete Element anstelle des Dokuments zu verwenden war, als insert mit() .

searchParent.insertBefore(label, el); 

Answer 2

Try Ersetzen Sie diese Zeile

document.searchParent.insertBefore(label, el); 

mit diesem:

document.insertBefore(label, searchParent);