向文檔添加字體真棒按鈕

Question

我想向按鈕添加一個字體很棒的符號，然后將該按鈕附加到我的頁面。 到目前為止我的代碼：

var rem=document.createElement("button");
rem.setAttribute('value','<i class="fa fa-trash-o" aria-hidden="true"></i>');
document.appendChild(rem);

但它不起作用。 控制台上有這個錯誤：

無法在“節點”上執行“appendChild”：文檔中只允許一個元素。

那么我如何實現這一目標？ 我可以使用其他代碼，例如 jQuery 等

Answer 1

兩件事情...

第一個是您嘗試將圖標添加到按鈕的方式。 通過使用rem.set('value', '...')你基本上是說輸出應該是

<button value="<i class="fa fa-trash-o" aria-hidden="true"></i>"></button>

……但你真正想要的是……

<button><i class="fa fa-trash-o" aria-hidden="true"></i></button>

要實現此目的，請使用rem.innerHTML = '...'

其次，您正在嘗試附加到無效的文檔，這就是為什么您收到錯誤“無法在 'Node' 上執行 'appendChild'：僅允許文檔中的一個元素。”。

你想要的是將它附加到<body>或頁面上的另一個元素，你可以用document.body.appendChild(rem)來做到這一點。 請參閱下面的解析代碼。

var rem = document.createElement('button');
    rem.innerHTML = '<i class="fa fa-trash-o" aria-hidden="true"></i>';
document.body.appendChild(rem);

如果您已經在使用 jQuery，則可以執行以下操作...

var rem = $( '<button><i class="fa fa-trash-o" aria-hidden="true"></i></button>' );
$('body').append(rem);

希望這可以幫助！

Answer 2

你在這里有兩個問題。 首先，錯誤的原因是因為您無法將button元素附加到document 。 您需要將其附加到body的元素。 在下面的示例中，我使用了body本身，但任何都可以。

其次，您需要將包含圖標的<i>元素設置為您創建的button的子元素，而不是value屬性。

 var rem = document.createElement("button"); rem.innerHTML = '<i class="fa fa-trash-o" aria-hidden="true"></i>'; document.body.appendChild(rem);

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />