如何將CSS樣式添加到JavaScript生成的HTML中？

我有這樣的HTML生成一個javascript：如何將CSS樣式添加到JavaScript生成的HTML中？

function showdropdown(name1,sel, param){ 
     var dval=""; 
     dval = "<select name=\"" + name1 + "\" id=\"" + name1 + "\" >"; 
     dval += "<option value=\"\">Option</option>\r\n";';

如何添加一個類= 「my_style」這個？它必須是超級簡單的，但不幸的是，我不知道任何關於與HTML結合的javascript結構。

我嘗試這樣做：

 dval = "<select name=\"" + name1 + "\" id=\"" + name1 + "\" class=\""mystyle"\">";

沒有工作:(像這樣的東西

來源

2014-09-19 user1227914

你似乎知道如何做字符串連接。爲什麼你認爲添加類與添加名稱或ID有什麼不同？ – Barmar 2014-09-19 03:57:58

我無法從你的文章的信息肯定，但我猜你mystyle變量不任何參考。你可能會尋找類似...

dval = "<select name=\"" + name1 + "\" id=\"" + name1 + "\" class=\"my_style\">";

你在做什麼（即創建標記的字符串表示），只要你工作，你創建的任何語法錯誤和這樣應該工作。但是，這通常是您的方法的問題：它容易導致錯誤，特別是隨着HTML變得越來越複雜。

您可能想要考慮使用可用的DOM方法來創建和使用元素。

例如

var divElement = document.createElement('div'); 
divElement.id = 'some-id'; // Add an ID attribute 
divElement.className = 'error'; // Set (and replace any existing) class attribute 
divElement.classList.add('bordered'); // Another method of adding a class (no replace) 
divElement.textContent = 'Hello, hello!'; // Set the text content… it's all good 
document.body.appendChild(divElement); // Append the node to the document

你可以看看這個JS Fiddle看到它的行動。如果您想了解更多關於可用DOM方法的信息，可以查看Node和Element文檔。

要對@ Seano666的回答發表評論......他說得對，使用兩種引號可以讓事情變得比逃脫更容易。但是，您應該使用外部單引號，並使用HTML的雙引號作爲標準。

來源

2014-09-19 04:08:38 Brendan

非常感謝，這是最詳細的答案:) – user1227914 2014-09-19 05:16:42

你真的應該使用引號/蜱，它比逃避報價更容易

也。，您沒有在mystyle上使用加號運算符

dval = "<select name='" + name1 + "' id='" + name1 + "' class='" + mystyle + "'>";

來源

2014-09-19 03:57:13 Seano666

謝謝:)你的工作肯定也是。 – user1227914 2014-09-19 05:17:50

是否要添加類別my_style或mystyle？如果你想my_style你缺少下劃線。

無需添加雙引號，如果類名稱不是一個變量：

dval = "<select name=\"" + name1 + "\" id=\"" + name1 + "\" class=\"mystyle\">";

來源

2014-09-19 04:04:44 Iridium52

如何將CSS樣式添加到JavaScript生成的HTML中？

回答

相關問題