如何通過書籤添加div到網頁上？

Question

因此，我正在製作類似Kick Ass的視頻遊戲，這是一款可在任何網站上播放的遊戲。但是，這將是一個使用DOM和JS來移動和操作所有內容的RPG。唯一的問題是，當有人點擊書籤時，我需要能夠將字符div添加到網頁中。

是否有可能使用書籤添加一個全新的div集合到網頁的末尾？

Answer 1

第一個回答是正確的，這應該工作，我已經飛快地寫着一個例子以及..這做了基本與現有的樣式/班在此計算器頁面..

什麼花時間是找到一種風格，並不要求孩子這麼多的水平，也很快谷歌上搜索一個書籤如何工作是什麼/ ..反正..

javascript: (function() { 
    alert('script running, click ok and i should scroll to the bottom'); 
    var oDiv = document.createElement('div'); 
    var oSpan = document.createElement('span'); 

    oDiv.setAttribute('class','topbar'); 
    oDiv.setAttribute('style','color:#fff; text-align:center;'); 
    oSpan.innerHTML = "I WAS ADDED USING A EXTERNAL CODE"; 

    document.body.appendChild(oDiv); 
    oDiv.appendChild(oSpan); 

    window.scrollTo(0,document.body.scrollHeight); 

}()); 

上面的例子是完整的複製和粘貼例子，這個我一直在Windows上的Chrome測試。但需要IE> = 9

如何使用/創建一個書籤

1. 複製上面的腳本到剪貼板
2. 在瀏覽器
3. 名稱你想要的任何書籤創建一個新的書籤，例如「添加頁腳」
4. 將此代碼粘貼到URL的bookma RK
5. 保存書籤/改變你已經
6. 在這個網頁上，打開書籤您創造... ...它會執行代碼

你應該會看到一個黑條上寫着「我在頁面底部以白色添加了「使用外部代碼」，這僅適用於桌面。手機會有所不同。

注意

• 使用匿名函數這裏是在我看來
• 記住一些元素/由JavaScript生成網站上的風格很好的做法。因此，在這種情況下，即使您分配課程，它也可能不會總是看起來一樣或者做任何事情。
• 您將看到具有「檢查元素」的元素，但「查看源代碼」不會，因爲這會請求免費的網頁副本，並且不會更改並顯示源代碼。
• 如果您使用的腳本大於上述腳本，則最好通過將腳本標籤附加到文件來執行。

獲取棘手的代碼/服務器端 - 我將立足這個在使用PHP服務器端..

如果你想做更復雜的事情，比如說保持計數有多少人使用過你的書籤或其他需要存儲或訪問信息的東西。

你會做一些東西，比如將bookmarklet作爲一個javascript文件，並使用追加腳本標記方法來調用你的腳本。

這將始終保持輕量級，並且可以通過使用PHP生成腳本來動態化。只需在php文件中使用JavaScript標頭。

您可以輕鬆使用PHP來計算腳本被調用/訪問的次數。

或者我個人的方法是使用ajax的形式向PHP服務器發送和接收數據/請求。這意味着使用基本的GET/POST類型請求。最後，您可以在自定義菜單中加載一個書籤，找到最佳位置和樣式，以便在網站上顯示自己的位置和樣式，並通過網站的各種控件顯示實時數據流。

這應該涵蓋了一些東西，各種來源：http://code.tutsplus.com/tutorials/create-bookmarklets-the-right-way--net-18154

編輯 - 帆布實例爲您

javascript: (function() { 
    alert('script running, click ok and i should scroll to the bottom'); 
    var oDiv = document.createElement('div'); 
    oDiv.setAttribute('class','character'); 
    oDiv.setAttribute('style','color:#fff; text-align:center;');  

    var oCanvas = document.createElement('canvas'); 
    oCanvas.setAttribute('class','gameCanvas'); 
    oCanvas.setAttribute('style','width: 100%; height:100%; z-index:999999; position:absolute; left:0px; top:0px; background-color:#d00;'); 

    document.body.appendChild(oDiv);  
    document.body.appendChild(oCanvas); 

}()); 

有了這個例子，我做了從scribblehub JS一些變化。主要是應用於畫布的樣式，它正在被添加..但是不可見，所以這個例子應該顯示一個紅色的全尺寸總是在頂部..增加Z-index和添加背景顏色..使用絕對位置，因爲這會將其移動到左上方......而不是頁面的底部。

而且改名變量爲具有可變JS名爲畫布是一個壞主意，在我的崗位

Answer 2

是，使用如下代碼：

var div = document.createElement('div'); 
div.className = 'some-class'; 
// set other properties here 
document.body.appendChild(div);