我有這個由 HTML 制作的 ul，我想用 JS 在里面創建元素
HTML代碼：
<ul id="navbar__list">
</ul>
和JS代碼：
var ul = document.getElementById("navbar__list");
var link1 = document.createElement("a");
var Li1 = document.createElement("li").appendChild(document.createElement("a"));
var sec1 = ul.appendChild(Li1)
link1.innerHTML = "Section 1"
link1.href ="#section1"
我得到的只是沒有文字，作為初學者，我不知道出了什么問題
uj5u.com熱心網友回復：
用這個：
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);
uj5u.com熱心網友回復：
你需要link1進入你的appendChild電話。現在你的代碼呼叫createElement("a")兩次，并通過第二初始化 <a>成appendChild，這是不是你想要的。
你會想要這個：
- 用
const當地人不應該被重新分配。 - 防御性：因為 JavaScript 不提供編譯時型別安全或其他保證，所以始終檢查您的假設以及
throw new Error這些假設何時失效是一個好主意。這極大地有助于 JavaScript 中的除錯（“快速失敗”）。 - 在 JS 中構建 DOM 元素樹時，我發現將每個元素放在自己的匿名范圍 (
{ }) 中會很有幫助，這反映了 DOM 的結構。- 這也有助于防止元素未正確設定父級的錯誤。
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 );
}
}
有點令人驚訝的是，DOM API 有點冗長：沒有簡潔的方法來創建具有屬性和內部內容集的元素，相反，我們需要顯式呼叫createElement和appendChild。已經提出了一些使用編譯時技術的替代方案，例如JSX，作為更輕量級的替代方案，您可以使用這樣的輔助函式：
/**
@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;
}
像這樣使用：
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" ) )
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/379262.html
標籤：javascript html