添加HTML字符串屬性添加到html元素

Question

我已經寫在有效的HTML屬性的字符串，我希望把這些屬性的實際HTML 元素（不是元素的HTML 串）上。

例如，我在明智地命名爲attributesStr變量中具有屬性的字符串，並且我想將這些屬性添加到#htmlElement div。

var attributesStr = ""; 
 
attributesStr += " class='regularClass'"; // Needs to handle key value attributes. 
 
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces. 
 
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties. 
 
attributesStr += " data-attributenovalue"; // And attributes with no value. 
 

 
// Your special code to add the attributes to `#htmlElement` goes here.

<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

JQuery的/ JavaScript代碼運行之後，#htmlElement應該是這樣的：

<div id="htmlElement" class='regularClass' title='Title... with spaces!' style='color: red; font-weight: bold;' data-attributenovalue> 
    The HTML element! 
</div> 

我怎樣才能做到這一點在JavaScript或jQuery的？

---

第一次嘗試：我想我能做到這一點通過.split()對空間荷蘭國際集團attributesStr，然後拆分每個單獨的屬性鍵值對的=，然後再遍歷數組，並添加每個鍵值對與jQuery的.prop()或.attr()，但這並不原因有二：

1. ，因爲他們有空間，它會失敗的style和title屬性。
2. 它可能失敗的屬性沒有價值。

Answer 1

採取attributesStr並將其插入到現有outerHTML。爲了達到這個目的，你需要通過刪除現有的標籤，注入字符串並放回其餘的html來重建節點。

var attributesStr = ""; 
 
attributesStr += " class='regularClass'"; // Needs to handle key value attributes. 
 
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces. 
 
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties. 
 
attributesStr += " data-attributenovalue"; // And attributes with no value. 
 

 
var element = document.getElementById('htmlElement'); 
 

 
var tag = element.tagName; 
 

 
element.outerHTML = '<' + tag + attributesStr + element.outerHTML.substring(tag.length + 1);

<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

Answer 2

爲什麼不分離你的字符串 ''

var attributesStr = ""; 
 
attributesStr = attributesStr + " class='regularClass'," ; // Needs to handle key value attributes. 
 
attributesStr = attributesStr +" title='Title... with spaces!',"; // And attributes with spaces. 
 
attributesStr = attributesStr +" style='color: red; font-weight: bold;',"; // And style with multiple properties. 
 
attributesStr = attributesStr +" data-attributenovalue,"; // And attributes with no value. 
 

 
var array = attributesStr.split(','); 
 

 
array.forEach(function(item){ 
 
property = item.split('='); 
 
$('#htmlElement').attr(property[0].trim()); 
 
if(property[1]) $('#htmlElement').attr(property[0].trim(), property[1].trim()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

Answer 3

這將讓你的第一次分裂

attributesStr.match(/[^\s=]+(=['][^']*['])?/g) 

結果：

["class='regularClass'", "title='Title... with spaces!'", "style='color: red; font-weight: bold;'", "data-attributenovalue"] 

然後在foreach中，您可以按照您的建議處理attrs。

Answer 4

您可以使用.attr（）在jquery中執行此操作。這是工作片段。

click here for attr() usage

$(document).ready(function(){ 
 
$("#htmlElement").attr("class", "regularClass"); 
 
$("#htmlElement").attr("title", "Title... with spaces!"); 
 
$("#htmlElement").attr("style", "color: red; font-weight: bold"); 
 
$("#htmlElement").attr("data-attributenovalue",true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

Answer 5

試試這個：

var dummHTML = $("<div "+attributesStr+"></div>"); 
$.each(dummHTML[0].attributes, function(i,v){ 
$('#htmlElement').attr(v.nodeName,v.nodeValue); 
}); 

Answer 6

也許不是最好的選擇，但如果要使用完整的字符串所需的：

的理念是：以內容該元素，然後將其刪除並使用新屬性重新創建它：

var attributesStr = ""; 
 
attributesStr += " class='regularClass'"; // Needs to handle key value attributes. 
 
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces. 
 
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties. 
 
attributesStr += " data-attributenovalue"; // And attributes with no value. 
 

 
// Your special code to add the attributes to `#htmlElement` goes here. 
 
var $innerHTML = $("#htmlElement").html() 
 
$("#htmlElement").remove() 
 
var $newElement = "<div id='htmlElement' " + attributesStr + ">" + $innerHTML + "</div>" 
 

 
$("body").after($newElement)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>