的JavaScript - 追加（）不附加一個按鈕，但文本

示例：的JavaScript - 追加（）不附加一個按鈕，但文本

var buttonHTML = "<button>MyButton</button>"; 
document.getElementById("myDiv").append(buttonHTML);

在這種情況下，函數結束追加文本到的div。

但是，如果我做同樣的JQ：

$("#myDiv").append(buttonHTML);

在這種情況下，它實際上將追加按鈕。現在，由於各種原因，我必須使用純JS（而不是JQ）。

任何人有任何想法？

來源

2016-12-26 Mi Tim

這是因爲你的VAR buttonHTML只是一個文本字符串，如果追加的是它作爲一個孩子，它會創建一個DOM textNode，而不是elementNode。你想要做什麼，而不是沿着以下線的東西：

var buttonHTML = document.createElement("button"); 
var buttonText = document.createTextNode("MyButton"); 
buttonHTML.appendChild(buttonText); 

document.getElementById("myDiv").appendChild(buttonHTML)

來源

2016-12-26 18:20:27

嗨。感謝您的迴應。實際上我剛纔想到了這一點。 –

我想我只是好奇，爲什麼JQ對待這個不同的方式，但是它再次沒有太大的區別。再次感謝您的確認！ –

那麼，jQuery只是一個你可以使用的庫，所以它如何對待DOM取決於編寫它的社區，而不是任何官方的規範。通常它比vanilla JS更直觀，但是使用vanilla JS，所以你可以熟悉DOM是一個好主意，我非常推薦它！ –

我不知道它是如何與你的工作和附加元素作爲文本在這裏，因爲有純JS

no .append功能

但我同意@Sam Judge said in his answer，也想提一提，你也可以做使用JavaScript它不使用JavaScript函數Element.insertAdjacentHTML()

insertAdjacentHTML（創建節點逐個）解析指定的文本作爲HTML或XML和將生成的節點插入到指定位置的DOM樹中。它不會重新分析它正在使用的元素，因此它確實不會損壞元素內的現有元素。這避免了序列化的額外步驟使其比內部HTML操作的直接快得多。

而且你也可以使用.innerHTML來做同樣的事情，但是肯定你需要保存裏面已經做的附加效果。

來源

2016-12-26 19:54:43

的JavaScript - 追加（）不附加一個按鈕，但文本

回答

相關問題