Debe pasar link1 a su llamada appendChild . En este momento, su código llama a createElement("a") dos veces y pasa el segundo <a> no inicializado a appendChild , que no es lo que desea.

Querrás esto:

• Use const para locales que no deben reasignarse.
• Esté a la defensiva: debido a que JavaScript no ofrece seguridad de tipo en tiempo de compilación u otras garantías, es una buena idea verificar siempre sus suposiciones y throw new Error cuando esas suposiciones se invaliden. Esto ayuda mucho a la depuración en JavaScript ( "fail fast" ).
• Cuando construyo árboles de elementos DOM en JS, encuentro útil colocar cada elemento en su propio ámbito anónimo ( { } ) que refleja la estructura del DOM.
  • Esto también ayuda a prevenir errores en los que los elementos no se relacionan correctamente.

 const ul = document.getElementById("navbar__list"); if( !ul ) throw new Error( "Couldn't find navbar__list" ); { const li = document.createElement("li"); ul.appendChild( li ); { const aLink = document.createElement("a"); aLink.textContent = "Section 1"; aLink.href = "#section1"; li.appendChild( aLink ); } }

Sorprendentemente, la API DOM es un poco detallada: no hay una forma sucinta de crear elementos con sus atributos y conjunto de contenido interno, en su lugar, necesitamos llamadas explícitas a createElement y appendChild . Se han propuesto algunas alternativas que usan técnicas de tiempo de compilación, como JSX , como una alternativa más liviana, podría usar una función de ayuda como esta:

 /** @param {string} tagName @param {[string, string][]} attributes - Array of 2-tuples @param {HTMLElement | HTMLElement[] | string} content - Either: one-or-many HTML elements, or string textContent */ function create( tagName, attributes, content ) { const e = document.createElement( tagName ); for( let i = 0; i < attributes.length; i++ ) { const pair = attributes[i]; e.setAttribute( pair[0], pair[1] ); } if( typeof content === 'string' ) { e.textContent = content; } else if( Array.isArray( content ) ) { for( const child of content ) { e.appendChild( child ); } } else if( typeof content === 'object' && content !== null ) { e.appendChild( content ); } return e; }

Usado así:

 const ul = document.getElementById("navbar__list"); if( !ul ) throw new Error( "Couldn't find navbar__list" ); { ul.appendChild( create( "li", [], create( "a", [ [ "href", "#section1" ] ], "Section 1" ) ) ); }

Utilizar este:

 var ul = document.getElementById("navbar__list"); var li = document.createElement("li"); ul.appendChild(li); var link = document.createElement("a"); link.setAttribute('href', '#section1'); link.innerHTML = "Section 1"; li.appendChild(link);