javascript - 在getElementsByClassName接收到的元素內部添加一個div

如果這個問題非常基礎，我真的很初學這個。我有一個帶有背景圖像的按鈕，我想在按鈕內插入一個小小的圖標以在其背景圖像上顯示。javascript - 在getElementsByClassName接收到的元素內部添加一個div

現在，我越來越按鈕元素是這樣的：

elements = document.getElementsByClassName("test"); 
var div = document.createElement("innerdiv"); 
div=""; 
var element = elements[0];

我認爲，所有我需要做的是插入按鈕DIV 內一個div，但我怎麼能做到這一點從這裏？

來源

2013-10-02 Robin

請張貼您的代碼，我們可以提供幫助。一個提示，'getElementsByClassName'返回一個NodeList。點擊這裏查看更多信息https://developer.mozilla.org/en-US/docs/DOM – elclanrs

我只能按類使用getelement，因爲按鈕只有類 – Robin

您是否嘗試過使用CSS僞元素？ – elclanrs

HTML：

<div class="button" id="button1"></div>

的javascript：

function addIcon(id) { 
    var btn = document.getElementById(id); 
    var div = document.createElement('div'); 
    div.style.className = 'icon'; 
    btn.appendChild(div); 
} 
addIcon('button1');

來源

2013-10-02 04:54:54 Adrian

嘗試這樣的事情。

// getElementsByClassName returns a list, so we'll take the first value 
    var firstMatch = document.getElementsByClassName('className')[0]; 

    var newDiv = document.createElement('div'); 
    // (Here is where you would set the id & attributes of the new div) 
    firstMatch.appendChild(newDiv);

來源

2013-10-02 04:55:12 guitarsteve

OP正試圖在按鈕中插入一個img元素。插入div無效。 – RobG

您不能將div作爲按鈕元素的子元素，它是無效的HTML。瀏覽器要麼會拋出一個錯誤，要麼可能把div放在按鈕後面。

一個按鈕可以有多個IMG元素作爲子元素，您可以使用CSS將一個圖像放在另一個圖像的頂部（比如位於左上角）。例如

<button style="position: relative;" class="test"> 
    <img src="b.jpg" alt=""> 
    <img src="a.gif" alt="" style="position: absolute; left:0; top: 0;"> 
</button>

要做到上述情況，並假設沒有在按鈕的圖像已經，你可以這樣做：

var elements = document.getElementsByClassName('test'); 
var img = document.createElement('img'); 
img.src = 'a.jpg'; 
img.alt = 'icon'; 
img.className = 'buttonIcon'; 
elements[0].appendChild(img);

而且你需要一點點的CSS支持：

.test { 
    /* In addition to current rules, if any */ 
    position: relative; 
} 

/* make the icon sit in the top left corner */ 
.buttonIcon { 
    position: absolute; 
    top: 0; 
    left: 0; 
}

你可以在腳本中應用硬編碼的CSS，但最好使用我認爲的規則。

來源

2013-10-02 05:42:50 RobG

javascript - 在getElementsByClassName接收到的元素內部添加一個div

回答

相關問題